site.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. // call this from the developer console and you can control both instances
  2. var calendars = {};
  3. $(document).ready(function () {
  4. // assuming you've got the appropriate language files,
  5. // clndr will respect whatever moment's language is set to.
  6. // moment.lang('ru');
  7. // here's some magic to make sure the dates are happening this month.
  8. var thisMonth = moment().format('YYYY-MM');
  9. var eventArray = [
  10. {startDate: thisMonth + '-10', endDate: thisMonth + '-14', title: 'Multi-Day Event'},
  11. {startDate: thisMonth + '-23', endDate: thisMonth + '-26', title: 'Another Multi-Day Event'}
  12. ];
  13. // the order of the click handlers is predictable.
  14. // direct click action callbacks come first: click, nextMonth, previousMonth, nextYear, previousYear, or today.
  15. // then onMonthChange (if the month changed).
  16. // finally onYearChange (if the year changed).
  17. calendars.clndr1 = $('.cal1').clndr({
  18. events: eventArray,
  19. // constraints: {
  20. // startDate: '2013-11-01',
  21. // endDate: '2013-11-15'
  22. // },
  23. clickEvents: {
  24. click: function (target) {
  25. console.log(target);
  26. if ($(target.element).hasClass('inactive')) {
  27. console.log('not a valid datepicker date.');
  28. } else {
  29. console.log('VALID datepicker date.');
  30. }
  31. },
  32. nextMonth: function () {
  33. console.log('next month.');
  34. },
  35. previousMonth: function () {
  36. console.log('previous month.');
  37. },
  38. onMonthChange: function () {
  39. console.log('month changed.');
  40. },
  41. nextYear: function () {
  42. console.log('next year.');
  43. },
  44. previousYear: function () {
  45. console.log('previous year.');
  46. },
  47. onYearChange: function () {
  48. console.log('year changed.');
  49. }
  50. },
  51. multiDayEvents: {
  52. startDate: 'startDate',
  53. endDate: 'endDate'
  54. },
  55. showAdjacentMonths: true,
  56. adjacentDaysChangeMonth: false
  57. });
  58. // calendars.clndr2 = $('.cal2').clndr({
  59. // template: $('#template-calendar').html(),
  60. // events: eventArray,
  61. // startWithMonth: moment().add('month', 1),
  62. // clickEvents: {
  63. // click: function(target) {
  64. // console.log(target);
  65. // }
  66. // }
  67. // });
  68. // bind both clndrs to the left and right arrow keys
  69. $(document).keydown(function (e) {
  70. if (e.keyCode == 37) {
  71. // left arrow
  72. calendars.clndr1.back();
  73. calendars.clndr2.back();
  74. }
  75. if (e.keyCode == 39) {
  76. // right arrow
  77. calendars.clndr1.forward();
  78. calendars.clndr2.forward();
  79. }
  80. });
  81. });