Pages UI
Search…
v5.0.1 - Pages HTML
UI Elements
Form Elements
Calendar
Pages calendar plugin is exclusive only on pages and is not a third party plugin. The horizontal scrolling helps it to fit easily on to small screens and user experience is seamless across all platforms. It supports many features including multiple languages and timezones
How to Setup
Dependencies
1
<script src="assets/plugins/interactjs/interact.min.js" type="text/javascript"></script>
2
<script src="assets/plugins/moment/moment-with-locales.min.js"></script>
Copied!
Pages Calendar Lib
1
<script src="pages/js/pages.calendar.min.js"></script>
Copied!
HTML Source
Inlcude the following HTML source to your file, you can remove the compontents you do not need to have
1
<div id="myCalendar" class="full-height"></div>
Copied!
Initialize Pages Calendar
To initialize pages calendar with default setting use the following code
1
$('#myCalendar').pagescalendar();
Copied!
Calendar Settings and Callbacks
1
$('body').pagescalendar({
2
ui: {
3
//Year Selector
4
year: {
5
visible: true,
6
format: 'YYYY',
7
startYear: '2000',
8
endYear: moment().add(10, 'year').format('YYYY'),
9
eventBubble: true
10
},
11
//Month Selector
12
month: {
13
visible: true,
14
format: 'MMM',
15
eventBubble: true
16
},
17
dateHeader: {
18
format: 'MMMM YYYY, D dddd',
19
visible: true,
20
},
21
//Mini Week Day Selector
22
week: {
23
day: {
24
format: 'D'
25
},
26
header: {
27
format: 'dd'
28
},
29
eventBubble: true,
30
startOfTheWeek: '0',
31
endOfTheWeek:'6'
32
},
33
//Week view Grid Options
34
grid: {
35
dateFormat: 'D dddd',
36
timeFormat: 'h A',
37
eventBubble: true,
38
scrollToFirstEvent:false,
39
scrollToAnimationSpeed:300,
40
scrollToGap:20
41
}
42
},
43
eventObj: {
44
editable: true
45
},
46
view:'week',
47
now: null,
48
locale: 'en',
49
//Event display time format
50
timeFormat: 'h:mm a',
51
minTime:0,
52
maxTime:24,
53
dateFormat: 'MMMM Do YYYY',
54
slotDuration: '30', //In Mins : supports 15, 30 and 60
55
events: [],
56
eventOverlap: false,
57
weekends:true,
58
disableDates:[],
59
//Event CallBacks
60
onViewRenderComplete: function() {},
61
onEventDblClick: function() {},
62
onEventClick: function(event) {},
63
onEventRender: function() {},
64
onEventDragComplete: function(event) {},
65
onEventResizeComplete: function(event) {},
66
onTimeSlotDblClick: function(timeSlot) {},
67
onDateChange:function(range){}
68
})
Copied!
Sample JSON Event Object
1
[
2
{
3
"title": "Call Dave",
4
"class": "bg-success-lighter",
5
"start": "2014-10-07T06:00:00",
6
"end": "2014-10-07T08:00:24",
7
"other": {}
8
},
9
{
10
"title": "Meeting Roundup",
11
"class": "bg-success-lighter",
12
"start": "2014-11-07T06:00:00"
13
},
14
{
15
"title": "Double click Any where",
16
"class": "bg-complete-lighter",
17
"start": "2014-11-07T01:00:00",
18
"end": "2014-11-07T02:00:00",
19
"other": {
20
"note": "test"
21
}
22
}
23
]
Copied!
Public Methods
1
$('#my_calendar_elment').pagescalendar('rebuild');
Copied!
Rebuild your calendar
1
$('#my_calendar_elment').pagescalendar('today');
Copied!
Set date to current date
1
$('#my_calendar_elment').pagescalendar('next');
Copied!
Next Month
1
$('#my_calendar_elment').pagescalendar('prev');
Copied!
Previous Month
1
$('#my_calendar_elment').pagescalendar('setDate',value);
Copied!
Parse in the date string to set a date to the calendar, it will accept any standard date formate
1
$('body').pagescalendar('getDate',formate);
Copied!
You can get the current date of the calendar and also pass in the required date formate to get the the desire formate output
example :
$('#my_calendar_elment').pagescalendar('getDate','dd/mm/yyyy');
It will accept any date formate string
1
$('#my_calendar_elment').pagescalendar('render');
Copied!
To render the calendar
1
$('#my_calendar_elment').pagescalendar('setLocale','fr');
Copied!
Change langues
1
$('#my_calendar_elment').pagescalendar('reloadEvent');
Copied!
Reload and draw events for the particular view.
1
$('#my_calendar_elment').pagescalendar('addEvent',eventObject);
Copied!
Adding an event to the calendar using the even object varriable, demostrated in demos/assets/js/calendar.js
1
$('#my_calendar_elment').pagescalendar('addEvent',eventArray);
Copied!
Add a batch of events at once.
1
$('#my_calendar_elment').pagescalendar('removeEvent',index);
Copied!
Removing an event also demonstrated in : demos/assets/js/calendar.js
1
$('#my_calendar_elment').pagescalendar('removeAllEvents');
Copied!
This method will remove all events in your array
1
$('#my_calendar_elment').pagescalendar('updateEvent',eventObject);
Copied!
Editing an event to the calendar using the even object variable, demonstrated in
demos/assets/js/calendar.js
1
$('#my_calendar_elment').pagescalendar('getEvents',option);
Copied!
Will get you all the events in your calendar array
1
$('#my_calendar_elment').pagescalendar('view',option);
Copied!
You can set the view / You can change your view to : "month" & " week"
1
$('#my_calendar_elment').pagescalendar('getView');
Copied!
Display the view type that is currently loaded : "month" or " week"
1
$('#my_calendar_elment').pagescalendar('getDateRangeInView');
Copied!
Will display start and end date of the current view
1
$('#my_calendar_elment').pagescalendar('getDateRangeInView');
Copied!
Will display start and end date of the current view
1
$('#my_calendar_elment').pagescalendar('setState',state);
Copied!
You can set state mannually when you need to, there are two states "loading" and "loaded", This will help you to show a progressbar for lazy event fetching
1
$('#my_calendar_elment').pagescalendar('error',msg);
Copied!
You can display an error message on your calendar by passing in a string
1
$('#my_calendar_elment').pagescalendar('scrollToFirstEvent')
Copied!
Scroll to the first even on week and day view
Settings
1
grid: {
2
dateFormat: 'D dddd',
3
timeFormat: 'h A',
4
eventBubble: true,
5
scrollToFirstEvent:false,
6
scrollToAnimationSpeed:300,
7
scrollToGap:20
8
}
Copied!
Callbacks
You can see a list of call back demonstrated in
demo/assets/calendar.js fileonViewRenderComplete()On Render Complete
onEventDblClick()Event Double Click
onEventClick(event)Event click call back returns the clicked event details into an array, you can
console.log(event) to see all event attributes
onEventRender()After Events are rendered to the view
onEventDragComplete()After user drag event is completed
onEventResizeComplete()After user resize event is completed
onTimeSlotDblClick(timeSlot)Double click time slot on the grid, returns the date and time of the particular timeslot
onDateChange(range)When ever the calendar's date is change, this call back will return a range, i.e: range.start and range.end both are dates
Supported Languages
Use the language code and set it to
localeLANGUAGE
CODE
Afrikaans
af
Albanian
sq
Armenian
hy-am
Azerbaijani
az
Bahasa Indonesia
id
Bahasa Malayu
ms-my
Basque
eu
Belarusian
be
Bengali
bn
Bosnian
bs
Breton
br
Bulgarian
bg
Catalan
ca
Chinese
zh-cn
Chinese (Traditional)
zh-tw
Chuvash
cv
Croatian
hr
Czech
cs
Danish
da
Dutch
nl
English
en
English (Australia)
en-au
English (Canada)
en-ca
English (England)
en-gb
Esperanto
eo
Estonian
et
Farose
fo
Finnish
fi
French
fr
French (Canada)
fr-ca
Galician
gl
Georgian
ka
German
de
German (Austria)
de-at
Greek
el
Hebrew
he
Hungarian
hu
Icelandic
is
Italian
it
Japanese
ja
Khmer (Cambodia)
km
Korean
ko
Latvian
lv
Lithuanian
lt
Luxembourgish
lb
Macedonian
mk
Malayalam
ml
Norwegian
nb
Norwegian Nynorsk
nn
Polish
pl
Portuguese
pt
Portuguese (Brazil)
pt-br
Romanian
ro
Russian
ru
Serbian
sr
Serbian Cyrillic
sr-cyrl
Slovak
sk
Slovenian
sl
Spanish
es
Swedish
sv
Tagalog (Filipino)
tl-ph
Tamaziɣt
tzm
Tamaziɣt Latin
tzm-latn
Tamil
ta
Thai
th
Turkish
tr
Ukrainian
uk
Uzbek
uz
Vietnamese
vi
Welsh
cy
For help and bug report please contact [email protected]
Last modified 3yr ago