Permalink
Browse files

Cleaned a bit the demos code

K-Phoen committed Apr 27, 2012
1 parent 9ecfc13 commit 2a9023899ab01873be70b07c767048d939dfb1a4
Showing with 803 additions and 823 deletions.
  1. +0 −1 events.json
  2. +99 −110 weekcalendar.html
  3. +192 −196 weekcalendar_demo_2.html
  4. +227 −210 weekcalendar_demo_3.html
  5. +121 −128 weekcalendar_demo_4.html
  6. +69 −77 weekcalendar_dst.html
  7. +95 −101 weekcalendar_json.html
View
@@ -1,4 +1,3 @@
[
{"id":1, "start":"2009-05-10T13:15:00.000+10:00", "end":"2009-05-10T14:15:00.000+10:00", "title":"Lunch with Mike"}
]
-
View
@@ -1,129 +1,118 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
-<style type='text/css'>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+ <title>Demo - jQuery Week Calendar</title>
- body {
- font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
- margin: 0;
- }
-
- h1 {
- margin: 0 0 1em;
- padding: 0.5em;
- }
-
- p.description {
- font-size: 0.8em;
- padding: 1em;
- position: absolute;
- top: 3.2em;
- margin-right: 400px;
- }
-
- #message {
- font-size: 0.7em;
- position: absolute;
- top: 1em;
- right: 1em;
- width: 350px;
- display: none;
- padding: 1em;
- background: #ffc;
- border: 1px solid #dda;
- }
-
-</style>
- <!--
- <link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css' />
- -->
+ <link rel='stylesheet' type='text/css' href='libs/css/smoothness/jquery-ui-1.8.11.custom.css' />
+ <link rel='stylesheet' type='text/css' href='jquery.weekcalendar.css' />
+ <style type='text/css'>
+ body {
+ font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
+ margin: 0;
+ }
- <link rel='stylesheet' type='text/css' href='libs/css/smoothness/jquery-ui-1.8.11.custom.css' />
+ h1 {
+ margin: 0 0 1em;
+ padding: 0.5em;
+ }
+ p.description {
+ font-size: 0.8em;
+ padding: 1em;
+ position: absolute;
+ top: 3.2em;
+ margin-right: 400px;
+ }
- <link rel='stylesheet' type='text/css' href='jquery.weekcalendar.css' />
+ #message {
+ font-size: 0.7em;
+ position: absolute;
+ top: 1em;
+ right: 1em;
+ width: 350px;
+ display: none;
+ padding: 1em;
+ background: #ffc;
+ border: 1px solid #dda;
+ }
+ </style>
+ <script type='text/javascript' src='libs/jquery-1.4.4.min.js'></script>
+ <script type='text/javascript' src='libs/jquery-ui-1.8.11.custom.min.js'></script>
- <!--
- <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
- <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js'></script>
- -->
+ <script type="text/javascript" src="libs/date.js"></script>
+ <script type='text/javascript' src='jquery.weekcalendar.js'></script>
+ <script type='text/javascript'>
+ var year = new Date().getFullYear();
+ var month = new Date().getMonth();
+ var day = new Date().getDate();
- <script type='text/javascript' src='libs/jquery-1.4.4.min.js'></script>
- <script type='text/javascript' src='libs/jquery-ui-1.8.11.custom.min.js'></script>
- <script type="text/javascript" src="libs/date.js"></script>
- <script type='text/javascript' src='jquery.weekcalendar.js'></script>
-<script type='text/javascript'>
+ var eventData = {
+ events : [
+ {'id':1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 35),'title':'Lunch with Mike'},
+ {'id':2, 'start': new Date(year, month, day, 14), 'end': new Date(year, month, day, 14, 45),'title':'Dev Meeting'},
+ {'id':3, 'start': new Date(year, month, day + 1, 18), 'end': new Date(year, month, day + 1, 18, 45),'title':'Hair cut'},
+ {'id':4, 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 9, 30),'title':'Team breakfast'},
+ {'id':5, 'start': new Date(year, month, day + 1, 14), 'end': new Date(year, month, day + 1, 15),'title':'Product showcase'}
+ ]
+ };
-
- var year = new Date().getFullYear();
- var month = new Date().getMonth();
- var day = new Date().getDate();
+ $(document).ready(function() {
+ $('#calendar').weekCalendar({
+ timeslotsPerHour: 4,
+ data:eventData,
+ height: function($calendar) {
+ return $(window).height() - $('h1').outerHeight(true);
+ },
+ eventRender : function(calEvent, $event) {
+ if (calEvent.end.getTime() < new Date().getTime()) {
+ $event.css('backgroundColor', '#aaa');
+ $event.find('.time').css({'backgroundColor': '#999', 'border':'1px solid #888'});
+ }
+ },
+ eventNew: function(calEvent, $event) {
+ displayMessage('<strong>Added event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end);
+ alert('You\'ve added a new event. You would capture this event, add the logic for creating a new event with your own fields, data and whatever backend persistence you require.');
+ },
+ eventDrop: function(calEvent, $event) {
+ displayMessage('<strong>Moved Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end);
+ },
+ eventResize: function(calEvent, $event) {
+ displayMessage('<strong>Resized Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end);
+ },
+ eventClick: function(calEvent, $event) {
+ displayMessage('<strong>Clicked Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end);
+ },
+ eventMouseover: function(calEvent, $event) {
+ displayMessage('<strong>Mouseover Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end);
+ },
+ eventMouseout: function(calEvent, $event) {
+ displayMessage('<strong>Mouseout Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end);
+ },
+ noEvents: function() {
+ displayMessage('There are no events for this week');
+ }
+ });
- var eventData = {
- events : [
- {"id":1, "start": new Date(year, month, day, 12), "end": new Date(year, month, day, 13, 35),"title":"Lunch with Mike"},
- {"id":2, "start": new Date(year, month, day, 14), "end": new Date(year, month, day, 14, 45),"title":"Dev Meeting"},
- {"id":3, "start": new Date(year, month, day + 1, 18), "end": new Date(year, month, day + 1, 18, 45),"title":"Hair cut"},
- {"id":4, "start": new Date(year, month, day - 1, 8), "end": new Date(year, month, day - 1, 9, 30),"title":"Team breakfast"},
- {"id":5, "start": new Date(year, month, day + 1, 14), "end": new Date(year, month, day + 1, 15),"title":"Product showcase"}
- ]
- };
+ function displayMessage(message) {
+ $('#message').html(message).fadeIn();
+ }
-
-
- $(document).ready(function() {
-
- $('#calendar').weekCalendar({
- timeslotsPerHour: 4,
- height: function($calendar){
- return $(window).height() - $("h1").outerHeight(true);
- },
- eventRender : function(calEvent, $event) {
- if(calEvent.end.getTime() < new Date().getTime()) {
- $event.css("backgroundColor", "#aaa");
- $event.find(".time").css({"backgroundColor": "#999", "border":"1px solid #888"});
- }
- },
- eventNew : function(calEvent, $event) {
- displayMessage("<strong>Added event</strong><br/>Start: " + calEvent.start + "<br/>End: " + calEvent.end);
- alert("You've added a new event. You would capture this event, add the logic for creating a new event with your own fields, data and whatever backend persistence you require.");
- },
- eventDrop : function(calEvent, $event) {
- displayMessage("<strong>Moved Event</strong><br/>Start: " + calEvent.start + "<br/>End: " + calEvent.end);
- },
- eventResize : function(calEvent, $event) {
- displayMessage("<strong>Resized Event</strong><br/>Start: " + calEvent.start + "<br/>End: " + calEvent.end);
- },
- eventClick : function(calEvent, $event) {
- displayMessage("<strong>Clicked Event</strong><br/>Start: " + calEvent.start + "<br/>End: " + calEvent.end);
- },
- eventMouseover : function(calEvent, $event) {
- displayMessage("<strong>Mouseover Event</strong><br/>Start: " + calEvent.start + "<br/>End: " + calEvent.end);
- },
- eventMouseout : function(calEvent, $event) {
- displayMessage("<strong>Mouseout Event</strong><br/>Start: " + calEvent.start + "<br/>End: " + calEvent.end);
- },
- noEvents : function() {
- displayMessage("There are no events for this week");
- },
- data:eventData
- });
-
- function displayMessage(message) {
- $("#message").html(message).fadeIn();
- }
-
- $("<div id=\"message\" class=\"ui-corner-all\"></div>").prependTo($("body"));
-
- });
+ $('<div id="message" class="ui-corner-all"></div>').prependTo($('body'));
+ });
</script>
</head>
<body>
- <h1>Week Calendar Demo</h1>
- <p class="description">This calendar demonstrates a basic calendar. Events triggered are displayed in the message area. Appointments in the past are shaded grey.</p>
- <div id='calendar'></div>
-
+ <h1>Week Calendar Demo</h1>
+
+ <p class="description">
+ This calendar demonstrates a basic calendar. Events triggered are
+ displayed in the message area. Appointments in the past are shaded grey.
+ </p>
+
+ <div id='calendar'></div>
+
</body>
</html>
Oops, something went wrong.

0 comments on commit 2a90238

Please sign in to comment.