diff --git a/examples/basic.html b/examples/basic.html index c83ccb8..630c761 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -11,7 +11,7 @@ } #calendar { - width: 900px; + width: 75%; margin: 0 auto; } @@ -48,25 +48,44 @@ title: "Repeating Event", start: new Date(y, m, 9) }, - { + /*{ id: 3, title: "Meeting", start: new Date(y, m, 20, 9, 0) - }, + },*/ { id: 4, title: "Click for Facebook", - start: new Date(y, m, 27), + start: new Date(y, m, 27, 16), + end: new Date(y, m, 29), + url: "http://facebook.com/" + }, + { + id: 5, + title: "Click for Facebook", + start: new Date(y, m, 27, 8), + end: new Date(y, m, 29), + url: "http://facebook.com/" + }, + { + id: 6, + title: "Click for Facebook", + start: new Date(y, m, 27, 14), end: new Date(y, m, 29), url: "http://facebook.com/" } ], + //titleFormat: 'My', weekStart: 1, - rightToLeft: true, - fixedWeeks: false, - title: true, + //rightToLeft: true, + //fixedWeeks: false, + //title: true, + //timeFormat: 'xg', eventDrop: function(event, delta) { //alert(delta); + }, + resize: function() { + //alert(this); } }); diff --git a/fullcalendar.css b/fullcalendar.css index e97f71d..8704173 100644 --- a/fullcalendar.css +++ b/fullcalendar.css @@ -1,36 +1,20 @@ /* top area w/ month title and buttons */ - -.full-calendar-header { - } .full-calendar-title { float: left; - margin-top: 0; - } - -.r2l .full-calendar-title { - float: right; + margin: 0 0 1em; } .full-calendar-buttons { float: right; - margin-bottom: 1em; - } - -.r2l .full-calendar-buttons { - float: left; + margin: 0 0 1em; } .full-calendar-buttons input { vertical-align: middle; - font-size: 1.0em; - margin-left: 5px; - } - -.r2l .full-calendar-buttons input { - float: right; - margin: 0 5px 0 0; + margin: 0 0 0 5px; + font-size: 1em; } .full-calendar-prev, @@ -40,16 +24,16 @@ -/* table & borders */ +/* table layout & outer border */ + +.full-calendar-month-wrap { + clear: both; + border: 1px solid #ccc; /* outer border color & style */ + } .full-calendar-month { - clear: both; - overflow: hidden; /* - ^ prevents draggable events from leaving. - reason for our long-winded border css. - borders now look consistent across doctypes. */ - border: 1px solid #ccc; /* border color & style */ - text-align: left; + width: 100%; + overflow: hidden; } .full-calendar-month table { @@ -57,12 +41,16 @@ border-spacing: 0; } + + +/* cell styling */ + .full-calendar-month th, .full-calendar-month td.day { padding: 0; vertical-align: top; - border-style: solid; /* border style */ - border-color: #ccc; /* border color */ + border-style: solid; /* inner border style */ + border-color: #ccc; /* inner border color */ border-width: 1px 0 0 1px; } @@ -71,15 +59,11 @@ text-align: center; } -.full-calendar-month th.first, /* left edge? */ +.full-calendar-month th.first, .full-calendar-month td.first { border-left: 0; } - - -/* day styling */ - .full-calendar-month td.today { background: #FFFFCC; } @@ -89,10 +73,6 @@ padding: 0 2px; } -.r2l .full-calendar-month .day-number { - text-align: left; - } - .full-calendar-month .other-month .day-number { color: #bbb; } @@ -117,10 +97,6 @@ text-align: left; } -.r2l .full-calendar-month .event { - text-align: right; - } - .full-calendar-month .ui-draggable-dragging td { cursor: move; } @@ -161,3 +137,27 @@ filter: alpha(opacity=20); } + + +/* right-to-left support */ + +.r2l .full-calendar-title { + float: right; + } + +.r2l .full-calendar-buttons { + float: left; + } + +.r2l .full-calendar-buttons input { + margin: 0 5px 0 0; + } + +.r2l .full-calendar-month .day-number { + text-align: left; + } + +.r2l .full-calendar-month .event { + text-align: right; + } + diff --git a/fullcalendar.js b/fullcalendar.js index 57eb01e..8a51e7b 100644 --- a/fullcalendar.js +++ b/fullcalendar.js @@ -28,10 +28,6 @@ options = options || {}; - var showTime = typeof options.showTime == 'undefined' ? 'guess' : options.showTime; - var bo = typeof options.buttons == 'undefined' ? true : options.buttons; - var weekStart = (options.weekStart || 0) % 7; - var r2l = options.rightToLeft; var dis, dit; // day index sign / translate if (r2l) { @@ -43,6 +39,14 @@ dit = 0; } + var showTime = typeof options.showTime == 'undefined' ? 'guess' : options.showTime; + var bo = typeof options.buttons == 'undefined' ? true : options.buttons; + var weekStart = (options.weekStart || 0) % 7; + var timeFormat = options.timeFormat || 'gx'; + var titleFormat = options.titleFormat || (r2l ? 'Y F' : 'F Y'); + + var tdTopBug, trTopBug, tbodyTopBug, sniffBugs = true; + this.each(function() { var date = options.year ? new Date(options.year, options.month || 0, 1) : new Date(); @@ -89,7 +93,7 @@ - var titleElement, todayButton, monthElement; + var titleElement, todayButton, monthElement, monthElementWidth; var header = $("
").appendTo(this); if (options.title !== false) @@ -99,26 +103,30 @@ var buttons = $("
").appendTo(header); var prevButton, nextButton; if (bo == true || bo.today != false) { - todayButton = $("") - .appendTo(buttons) - .click(today); + todayButton = $("").click(today); if (typeof bo.today == 'string') todayButton.val(bo.today); } if (bo == true || bo.prev != false) { - prevButton = $("") - .appendTo(buttons) - .click(prevMonth); + prevButton = $("").click(prevMonth); if (typeof bo.prev == 'string') prevButton.val(bo.prev); } if (bo == true || bo.next != false) { - nextButton = $("") - .appendTo(buttons) - .click(nextMonth); + nextButton = $("").click(nextMonth); if (typeof bo.next == 'string') nextButton.val(bo.next); } + if (r2l) { + if (nextButton) nextButton.appendTo(buttons); + if (prevButton) prevButton.appendTo(buttons); + if (todayButton) todayButton.appendTo(buttons); + }else{ + if (todayButton) todayButton.appendTo(buttons); + if (prevButton) prevButton.appendTo(buttons); + if (nextButton) nextButton.appendTo(buttons); + } } - monthElement = $("
").appendTo(this); + monthElement = $("
") + .appendTo($("
").appendTo(this)); @@ -134,7 +142,7 @@ clearTime(date); var year = date.getFullYear(); var month = date.getMonth(); - monthTitle = monthNames[month] + ' ' + year; + monthTitle = formatTitle(date); if (titleElement) titleElement.text(monthTitle); clearTime(date); @@ -250,6 +258,17 @@ } resizeTable(); + + if (sniffBugs) { + var tr = tbody.find('tr'); + var td = tr.find('td'); + var trTop = tr.position().top; + var tdTop = td.position().top; + tdTopBug = tdTop < 0; + trTopBug = trTop != tdTop; + tbodyTopBug = tbody.position().top != trTop; + sniffBugs = false; + } if (typeof options.events == 'string') { if (options.loading) options.loading(true); @@ -320,7 +339,9 @@ }); } }); - segs.sort(function(a, b) { return b.msLength - a.msLength; }); + segs.sort(function(a, b) { + return (b.msLength - a.msLength) * 100 + (a.event.start - b.event.start); + }); var levels = []; $.each(segs, function(j, seg) { var l = 0; // level index @@ -362,8 +383,12 @@ for (var i=0; i" : '') + "" + (roundE ? "" : '') + ""); - buildEventText(element.find('td.c'), event, - typeof event.showTime == 'undefined' ? showTime : event.showTime, r2l); + buildEventText(event, element.find('td.c')); if (options.eventRender) { var res = options.eventRender(event, element); if (typeof res != 'undefined') { @@ -473,7 +497,7 @@ function draggableEvent(event, element) { element.draggable({ - zIndex: 3, + zIndex: 4, delay: 50, opacity: options.eventDragOpacity, revertDuration: options.eventRevertDuration, @@ -561,7 +585,8 @@ dayY = []; tbody.find('tr').each(function() { tr = $(this); - dayY.push(tr.position().top); + dayY.push(tr.position().top + + (trTopBug ? tbody.position().top : 0)); }); dayY.push(dayY[dayY.length-1] + tr.height()); dayX = []; @@ -621,11 +646,15 @@ function resizeTable() { - var cellw = Math.floor(tbody.width() / 7); + var tbodyw = tbody.width(); + var cellw = Math.floor(tbodyw / 7); var cellh = Math.round(cellw * .85); - thead.find('th:lt(6)').width(cellw); + thead.find('th') + .filter(':lt(6)').width(cellw).end() + .filter(':eq(6)').width(tbodyw - cellw*6); tbody.find('td').height(cellh); glass.height(monthElement.height()); + monthElementWidth = monthElement.width(); } function clearEvents() { @@ -633,17 +662,75 @@ eventElements[i][1].remove(); eventElements = []; } + + + + + + function buildEventText(event, element) { + $("") + .text(event.title) + .appendTo(element); + var st = typeof event.showTime == 'undefined' ? showTime : event.showTime; + if (st != false) { + var h = event.start.getHours(); + var m = event.start.getMinutes(); + if (st == true || st == 'guess' && (h || m || event.end.getHours() || event.end.getMinutes())) { + var s = ''; + for (var i=0; i"); + if (r2l) element.append(timeElement.text(' ' + s)); + else element.prepend(timeElement.text(s + ' ')); + } + } + } + + function formatTitle(d) { + var m = d.getMonth(); + var s = ''; + for (var i=0; i").text(timeText)); - } - } - var et = $("").text(event.title) - if (r2l) element.prepend(et); - else element.append(et); + function zeroPad(n) { + if (n < 10) return '0' + n; + return n; } - + + + + // event utils function cleanEvents(events) { $.each(events, function(i, event) { @@ -691,6 +769,7 @@ // date utils var monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December']; + var monthAbbrevs = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; var dayNames = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; var dayAbbrevs = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];