Guest User

JQuery Week Calendar

a guest
Oct 27th, 2015
176
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.44 KB | None | 0 0
  1. <script type="text/javascript">
  2.  
  3.     (function($) {
  4.         d = new Date();
  5.         year = d.getFullYear();
  6.         month = d.getMonth();
  7.         day = d.getDate();
  8.  
  9.         $(document).ready(function() {
  10.             var $calendar = $('#calendar').weekCalendar({
  11.                 timeslotsPerHour: 4,
  12.                 scrollToHourMillis : 0,
  13.                 height: function($calendar){
  14.                     return $(window).height() - $('h1').outerHeight(true);
  15.                 },
  16.                 eventRender : function(calEvent, $event) {
  17.                     console.log("eventRender");
  18.                     if (calEvent.end.getTime() < new Date().getTime()) {
  19.                        $event.css('backgroundColor', '#aaa');
  20.                        $event.find('.wc-time').css({
  21.                            backgroundColor: '#999',
  22.                            border:'1px solid #888'
  23.                        });
  24.                    }
  25.                },
  26.                eventNew : function(calEvent, $event, FreeBusyManager, calendar) {
  27.                    console.log("eventNew");
  28.                },
  29.  
  30.                eventClick: function(calEvent, element, freeBusyManager, $calendar, DomEvent) {
  31.                    console.log("eventClick!!!");
  32.                },
  33.  
  34.                beforeEventNew: function(event, data) {
  35.                    console.log("beforeEventNew"); return false;
  36.                },
  37.  
  38.                eventDrag: function(calEvent, element) {
  39.                    console.log("eventDrag");
  40.                },
  41.                eventDrop: function(newCalEvent, oldCalEvent, element) {
  42.                    console.log("eventDrop");
  43.                    console.log(oldCalEvent);
  44.                },
  45.                draggable: function(calEvent, eventElement) {
  46.                    console.log("draggable");
  47.                    return true;
  48.                },
  49.                eventAfterRender : function(calEvent, element) {
  50.                    console.log("eventAfterRender");
  51.                },
  52.                eventResize : function(newCalEvent, oldCalEvent, element) {
  53.                    console.log("eventResize");
  54.                },
  55.  
  56.                data: function(start, end, callback) {
  57.                    callback({
  58.                        options: {
  59.                            defaultFreeBusy: {
  60.                                free: true
  61.                            }
  62.                        },
  63.                        events : [
  64.                          {'id': 9, 'start': new Date(2015,9,27,17,30), 'end': new Date(2015,9,27,17,40), 'title': 'бла бла звонок', 'description': '', 'typeIs': 'iCall', 'userId': 0, 'sourceUid': 'cdf8842c-3733-43e9-8c55-f74196179a0c'},
  65. {'id': 11, 'start': new Date(2015,9,27,12,30), 'end': new Date(2015,9,27,14,0), 'title': 'Тестовое событие для Юзер7 на 27 число', 'description': '', 'typeIs': 'iEvent', 'userId': 0, 'sourceUid': '0a24a6a6-5f89-4638-8ca5-edd78e72d685'},
  66. {'id': 12, 'start': new Date(2015,9,27,15,0), 'end': new Date(2015,9,27,16,0), 'title': 'Бла бла для 7 и 8 на 27', 'description': 'Описание', 'typeIs': 'iEvent', 'userId': [0,1], 'sourceUid': '0a24a6a6-5f89-4638-8ca5-edd78e72d685'},
  67. {'id': 12, 'start': new Date(2015,9,27,15,0), 'end': new Date(2015,9,27,16,0), 'title': 'Бла бла для 7 и 8 на 27', 'description': 'Описание', 'typeIs': 'iEvent', 'userId': [0,1], 'sourceUid': '0a24a6a6-5f89-4638-8ca5-edd78e72d685'},
  68. {'id': 458, 'start': new Date(2015,9,26,15,0), 'end': new Date(2015,9,26,15,30), 'title': 'Тестовая задача 2 для User8 и User7 на 26 число', 'description': '', 'typeIs': 'iTask', 'userId': 0, 'sourceUid': 'f532ef81-20e1-467d-89a4-940c57a609bc'},
  69. {'id': 455, 'start': new Date(2015,9,26,13,0), 'end': new Date(2015,9,26,14,0), 'title': 'Тестовая задача для User8 на 26 число', 'description': '', 'typeIs': 'iTask', 'userId': 1, 'sourceUid': 'f532ef81-20e1-467d-89a4-940c57a609bc'},
  70. {'id': 459, 'start': new Date(2015,9,26,15,0), 'end': new Date(2015,9,26,15,30), 'title': 'Тестовая задача 2 для User8 и User7 на 26 число', 'description': '', 'typeIs': 'iTask', 'userId': 1, 'sourceUid': 'f532ef81-20e1-467d-89a4-940c57a609bc'}
  71.                        ]
  72.                    });
  73.                },
  74.                startOnFirstDayOfWeek: false,
  75.                use24Hour: true,
  76.                buttons: false,
  77.                timeSeparator: ' - ',
  78.                users: ['User 7','User 8'],
  79.                showAsSeparateUser: true,
  80.                displayOddEven: true,
  81.                displayFreeBusys: false,
  82.                daysToShow: 3,
  83.                headerSeparator: '. ',
  84.                useShortDayNames: true,
  85.                // I18N
  86.                firstDayOfWeek: $.datepicker.regional['ru'].firstDay,
  87.                shortDays: $.datepicker.regional['ru'].dayNamesShort,
  88.                longDays: $.datepicker.regional['ru'].dayNames,
  89.                shortMonths: $.datepicker.regional['ru'].monthNamesShort,
  90.                longMonths: $.datepicker.regional['ru'].monthNames,
  91.                date: new Date(2015, 9, 25),
  92.                dateFormat: 'd F y',
  93.                showHeader: false,
  94.                hourLine: true,
  95.                businessHours: {start: 8, end: 20, limitDisplay: true}
  96.            });
  97.  
  98.  
  99.            $calendar.weekCalendar('refresh');
  100.  
  101.  
  102.  
  103.        });
  104.    })(jQuery);
  105. </script>
Advertisement
Add Comment
Please, Sign In to add comment