ss-ng-calendar

Calendar component for AngularJS.


Keywords
calendar, moment, angularjs
License
MIT
Install
bower install ss-ng-calendar

Documentation

ng-calendar

Description

Calendar component for AngularJS.

Demo

Requirements

Install

  • Manually

Download latest release here.

  • NPM
npm install ss-ng-calendar
  • Bower
bower install ss-ng-calendar

Setup

<link rel="stylesheet" href=".../src/ng-calendar.view.css">

<script type="text/javascript" src=".../moment.js"></script>
<script type="text/javascript" src=".../angular.js"></script>

<script type="text/javascript" src=".../src/ng-calendar.component.js"></script>
angular.module("App", ["ngCalendar"]);

Usage

ctx.calendarOptions = {};

ctx.calendarValue = null;

ctx.onChooseDate = onChooseDate;

function onChooseDate(date) {
    ctx.calendarValue = date;
}
<ng-calendar options="ctx.calendarOptions" on-choose-date="ctx.onChooseDate"></ng-calendar>

Options

  • Week view (No time.)
    Use to switch to week view mode.
ctx.calendarOptions = { IsWeek: true };
  • Week view (With time.)
    Use to add time to week view mode.
ctx.calendarOptions = { IsWeek: true, IsWithTime: true };

WARNING: Options described from now will be working just for the week view mode with time.

  • Available date range
    Use to hide times, not within this range.
    • Also, disables arrow to change a week, if there are no available times.
ctx.calendarOptions = { IsWeek: true, IsWithTime: true, FromDate: moment(), ToDate: moment().add(1, "M") };

//If you need to set FromDate: moment(), just use IsFromNow: true.
  • Available time range
    Use to hide hours, not within this range.
    • Default is from 0 to 23.
ctx.calendarOptions = { IsWeek: true, IsWithTime: true, FromHour: 7, ToHour: 19 };
  • Interval
    Use to generate hours with some interval.
    • Default is 1 hour.
ctx.calendarOptions = { IsWeek: true, IsWithTime: true, HourInterval: 2, MinuteInterval: 30 };

Additional

  • Events
    Use to highlight the date.
    • WARNING: Just for month view mode.
ctx.calendarOptions = {};

ctx.calendarEvents = [moment(), "2022-07-12"];
<ng-calendar options="ctx.calendarOptions" events="ctx.calendarEvents"></ng-calendar>
  • Get date range
    Use to get date range and watch changes after clicking on arrows.
ctx.calendarOptions = {};

ctx.onChangeDate = onChangeDate;

function onChangeDate(dateRange) {
    //dateRange is an object with FromDate and ToDate properties as moment objects.
}
<ng-calendar options="ctx.calendarOptions" on-change-date="ctx.onChangeDate"></ng-calendar>
  • Get chosen date
    Use to get chosen date after clicking on one.
    • Clicking on one date two times will clear it.
ctx.calendarOptions = {};

ctx.onChooseDate = onChooseDate;

function onChooseDate(date) {
    //date is a chosen date as moment object or null.
}
<ng-calendar options="ctx.calendarOptions" on-choose-date="ctx.onChooseDate"></ng-calendar>
  • Change view
    Use to change view after load.
ctx.calendarOptions = {};

//After the calendar is initialized.

var isMonth = false; //To change to week view mode.

ctx.changeCalendarView(isMonth);
<ng-calendar options="ctx.calendarOptions" set-view="ctx.changeCalendarView"></ng-calendar>
  • Refresh
    Use to reload options in case of change.
ctx.calendarOptions = {};

//After the calendar is initialized.

ctx.calendarOptions = { IsWeek: true, IsWithTime: true, FromHour: 8, ToHour: 17 };

ctx.refreshCalendar();
<ng-calendar options="ctx.calendarOptions" refresh="ctx.refreshCalendar"></ng-calendar>