ss-ng-calendar v1.0.0

ng-calendar

Description

Calendar component for AngularJS.

Demo

• Plunker

Requirements

• Moment.js
• AngularJS

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 rangeUse 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 rangeUse to hide hours, not within this range.
  • Default is from 0 to 23.

ctx.calendarOptions = { IsWeek: true, IsWithTime: true, FromHour: 7, ToHour: 19 };

• IntervalUse to generate hours with some interval.
  • Default is 1 hour.

ctx.calendarOptions = { IsWeek: true, IsWithTime: true, HourInterval: 2, MinuteInterval: 30 };

Additional

• EventsUse 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 rangeUse 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 dateUse 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 viewUse 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>

• RefreshUse 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>