123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- // call this from the developer console and you can control both instances
- var calendars = {};
- $(document).ready(function () {
- // assuming you've got the appropriate language files,
- // clndr will respect whatever moment's language is set to.
- // moment.lang('ru');
- // here's some magic to make sure the dates are happening this month.
- var thisMonth = moment().format('YYYY-MM');
- var eventArray = [
- {startDate: thisMonth + '-10', endDate: thisMonth + '-14', title: 'Multi-Day Event'},
- {startDate: thisMonth + '-23', endDate: thisMonth + '-26', title: 'Another Multi-Day Event'}
- ];
- // the order of the click handlers is predictable.
- // direct click action callbacks come first: click, nextMonth, previousMonth, nextYear, previousYear, or today.
- // then onMonthChange (if the month changed).
- // finally onYearChange (if the year changed).
- calendars.clndr1 = $('.cal1').clndr({
- events: eventArray,
- // constraints: {
- // startDate: '2013-11-01',
- // endDate: '2013-11-15'
- // },
- clickEvents: {
- click: function (target) {
- console.log(target);
- if ($(target.element).hasClass('inactive')) {
- console.log('not a valid datepicker date.');
- } else {
- console.log('VALID datepicker date.');
- }
- },
- nextMonth: function () {
- console.log('next month.');
- },
- previousMonth: function () {
- console.log('previous month.');
- },
- onMonthChange: function () {
- console.log('month changed.');
- },
- nextYear: function () {
- console.log('next year.');
- },
- previousYear: function () {
- console.log('previous year.');
- },
- onYearChange: function () {
- console.log('year changed.');
- }
- },
- multiDayEvents: {
- startDate: 'startDate',
- endDate: 'endDate'
- },
- showAdjacentMonths: true,
- adjacentDaysChangeMonth: false
- });
- // calendars.clndr2 = $('.cal2').clndr({
- // template: $('#template-calendar').html(),
- // events: eventArray,
- // startWithMonth: moment().add('month', 1),
- // clickEvents: {
- // click: function(target) {
- // console.log(target);
- // }
- // }
- // });
- // bind both clndrs to the left and right arrow keys
- $(document).keydown(function (e) {
- if (e.keyCode == 37) {
- // left arrow
- calendars.clndr1.back();
- calendars.clndr2.back();
- }
- if (e.keyCode == 39) {
- // right arrow
- calendars.clndr1.forward();
- calendars.clndr2.forward();
- }
- });
- });
|