Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/twinssbc/ionic-calendar
A calendar directive for Ionic framework
https://github.com/twinssbc/ionic-calendar
calendar ionic
Last synced: 4 days ago
JSON representation
A calendar directive for Ionic framework
- Host: GitHub
- URL: https://github.com/twinssbc/ionic-calendar
- Owner: twinssbc
- License: mit
- Created: 2015-11-22T15:32:57.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-05-23T15:11:52.000Z (over 6 years ago)
- Last Synced: 2025-01-10T03:10:03.688Z (12 days ago)
- Topics: calendar, ionic
- Language: JavaScript
- Homepage: http://twinssbc.github.io/Ionic-Calendar/demo
- Size: 195 KB
- Stars: 159
- Watchers: 14
- Forks: 73
- Open Issues: 83
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Ionic-Calendar directive
Ionic calendar directive
This repository only supports Ionic v1.
Please visit https://github.com/twinssbc/Ionic2-Calendar which supports higher version of Ionic.
# Demo
http://twinssbc.github.io/Ionic-Calendar/demo/
# Usage
Bower Install: `bower install ionic-calendar`
Load the necessary dependent files:
Add the calendar module as a dependency to your application module:
var myAppModule = angular.module('MyApp', ['ui.rCalendar'])
Add the directive in the html page
To change calendar selected date, simply use ng-model
$scope.selectedDate = new Date();
# Options
* formatDay
The format of the date displayed in the month view.
Default value: 'dd'
* formatDayHeader
The format of the header displayed in the month view.
Default value: 'EEE'
* formatDayTitle
The format of the title displayed in the day view.
Default value: 'MMMM dd, yyyy'
* formatWeekTitle
The format of the title displayed in the week view.
Default value: 'MMMM yyyy, Week w'
* formatMonthTitle
The format of the title displayed in the month view.
Default value: 'MMMM yyyy'
* formatWeekViewHeader
The format of the header displayed in the week view.
Default value: 'EEE d'
* formatHourColumn
The format of the hour column displayed in the week and day view.
Default value: 'ha'
* calendarMode
The initial mode of the calendar.
Default value: 'month'
* showEventDetail
If set to true, when selecting the date in the month view, the events happened on that day will be shown below.
Default value: true
* startingDayMonth
Control month view starting from which day.
Default value: 0
* startingDayWeek
Control week view starting from which day.
Default value: 0
* allDayLabel
The text displayed in the allDay column header.
Default value: ‘all day’
* noEventsLabel
The text displayed when there’s no event on the selected date in month view.
Default value: ‘No Events’
* eventSource
The data source of the calendar, when the eventSource is set, the view will be updated accordingly.
Default value: null
The format of the eventSource is described in the EventSource section
* queryMode
If queryMode is set to 'local', when the range or mode is changed, the calendar will use the already bound eventSource to update the view
If queryMode is set to 'remote', when the range or mode is changed, the calendar will trigger a callback function rangeChanged.
Users will need to implement their custom loading data logic in this function, and fill it into the eventSource. The eventSource is watched, so the view will be updated once the eventSource is changed.
Default value: 'local'
* step
It can be set to 15 or 30, so that the event can be displayed at more accurate position in weekview or dayview.
* autoSelect
If set to true, the current calendar date will be auto selected when calendar is loaded or swiped in the month view.
Default value: true
# View Customization Options
* monthviewDisplayEventTemplateUrl
The template url to provide customized view for event displayed in the monthview
Default value: 'templates/rcalendar/monthviewDisplayEvent.html'
```
$scope.monthviewDisplayEventTemplateUrl = 'myTemplate.html';
```
* monthviewEventDetailTemplateUrl
The template url to provide customized view for event detail section in the monthview
Default value: 'templates/rcalendar/monthviewEventDetail.html'
```
$scope.monthviewEventDetailTemplateUrl = 'myTemplate.html';
```
* weekviewAllDayEventTemplateUrl
The template url to provide customized view for all day event in the weekview
Default value: 'templates/rcalendar/displayEvent.html'
```
$scope.weekviewAllDayEventTemplateUrl = 'myTemplate.html';
```
* weekviewNormalEventTemplateUrl
The template url to provide customized view for normal event in the weekview
Default value: 'templates/rcalendar/displayEvent.html'
```
$scope.weekviewNormalEventTemplateUrl = 'myTemplate.html';
```
* dayviewAllDayEventTemplateUrl
The template url to provide customized view for all day event in the dayview
Default value: 'templates/rcalendar/displayEvent.html'
```
$scope.dayviewAllDayEventTemplateUrl = 'myTemplate.html';
```
* dayviewNormalEventTemplateUrl
The template url to provide customized view for normal event in the dayview
Default value: 'templates/rcalendar/displayEvent.html'
```
$scope.dayviewNormalEventTemplateUrl = 'myTemplate.html';
```
# Callback Options
* rangeChanged
The callback function triggered when the range or mode is changed if the queryMode is set to 'remote'
$scope.rangeChanged = function (startTime, endTime) {
Events.query({startTime: startTime, endTime: endTime}, function(events){
$scope.eventSource=events;
});
};
* eventSelected
The callback function triggered when an event is clicked
$scope.onEventSelected = function (event) {
console.log(event.title);
};
* timeSelected
The callback function triggered when a date is selected in the monthview. If there's no event at the selected time, the events parameter will be either undefined or empty array
$scope.onViewTitleChanged = function (title) {
$scope.viewTitle = title;
};
* isDateDisabled
The callback function to determine if the date should be disabled