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>