Merge pull request #21 from KirkeWeb/resourceView

Thanks for this! Demo page for the resource view
2026-06-27 16:10:13 +08:00 · 2014-08-14 13:52:17 +01:00
parent 4e17e21086 08e8e8527b
commit 4775966848
1 changed files with 135 additions and 0 deletions
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8' />
+  <link href='../dist/fullcalendar.css' rel='stylesheet' />
+  <link href='../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
+  <style type="text/css">
+    body {
+      margin: 5px;
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-size: 14px;
+      line-height: 20px;
+      background-color: #ffffff;
+    }
+
+    .red {
+      background-color: rgb(255, 190, 190);
+    }
+  </style>
+  <script src='../lib/moment/moment.js'></script>
+  <script src='../lib/jquery/dist/jquery.js'></script>
+  <script src='../lib/jquery-ui/ui/jquery-ui.js'></script>
+  <script src='../dist/fullcalendar.js'></script>
+  <script>
+
+    $(document).ready(function() {
+      var date = new Date();
+      var d = date.getDate();
+      var m = date.getMonth();
+      var y = date.getFullYear();
+
+      $('#calendar').fullCalendar({
+        header: {
+          left: 'prev,next today',
+          center: 'title',
+          right: 'month,agendaWeek,resourceDay'
+        },
+        defaultView: 'resourceDay',
+        editable: true,
+        droppable: true,
+        resources: [{
+                      'id': 'resource1',
+                      'name': 'Resource 1'
+                    }, {
+                      'id': 'resource2',
+                      'name': 'Resource 2'
+                    }, {
+                      'id': 'resource3',
+                      'name': 'Resource 3',
+                      'className': ['red']
+                    }],
+        events: [{
+                   title: 'R1-R2: Lunch 12.15-14.45',
+                   start: new Date(y, m, d, 12, 15),
+                   end: new Date(y, m, d, 14, 45),
+                   allDay: false,
+                   resources: ['resource1', 'resource2']
+                 }, {
+                   title: 'R1: All day',
+                   start: new Date(y, m, d, 10, 30),
+                   end: new Date(y, m, d, 11, 0),
+                   allDay: true,
+                   resources: 'resource1'
+                 }, {
+                   title: 'R2: Meeting 11.00',
+                   start: new Date(y, m, d, 11, 0),
+                   allDay: true,
+                   resources: 'resource2'
+                 }, {
+                   title: 'R1/R2: Lunch 12-14',
+                   start: new Date(y, m, d, 12, 0),
+                   end: new Date(y, m, d, 14, 0),
+                   allDay: false,
+                   resources: ['resource1', 'resource2']
+                 }, {
+                   id: 777,
+                   title: 'Lunch',
+                   start: new Date(y, m, d, 12, 0),
+                   end: new Date(y, m, d, 14, 0),
+                   allDay: false,
+                   resources: ['resource1']
+                 }, {
+                   id: 999,
+                   title: 'Repeating Event',
+                   start: new Date(y, m, d - 3, 16, 0),
+                   allDay: false,
+                   resources: 'resource2'
+                 }, {
+                   id: 999,
+                   title: 'Repeating Event',
+                   start: new Date(y, m, d + 4, 16, 0),
+                   allDay: false,
+                   resources: 'resource2'
+                 }],
+        // the 'ev' parameter is the mouse event rather than the resource 'event'
+        // the ev.data is the resource column clicked upon
+        selectable: true,
+        selectHelper: true,
+        select: function(start, end, ev) {
+          console.log(start);
+          console.log(end);
+          console.log(ev.data); // resources
+        },
+        eventClick: function(event) {
+          console.log(event);
+        },
+        eventDrop: function (event, delta, revertFunc) {
+          console.log(event);
+        }
+      });
+    });
+
+  </script>
+  <style>
+
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
+      font-size: 14px;
+    }
+
+    #calendar {
+      width: 900px;
+      margin: 40px auto;
+    }
+
+  </style>
+</head>
+<body>
+
+<div id='calendar'></div>
+
+</body>
+</html>