diff --git a/examples/basic.html b/examples/basic.html index 6038de2..c83ccb8 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -35,7 +35,7 @@ { id: 1, title: "Long Event", - start: new Date(y, m, 6), + start: new Date(y, m, 6, 14, 0), end: new Date(y, m, 11) }, { @@ -60,7 +60,14 @@ end: new Date(y, m, 29), url: "http://facebook.com/" } - ] + ], + weekStart: 1, + rightToLeft: true, + fixedWeeks: false, + title: true, + eventDrop: function(event, delta) { + //alert(delta); + } }); }); diff --git a/fullcalendar.css b/fullcalendar.css index 7b7083f..e97f71d 100644 --- a/fullcalendar.css +++ b/fullcalendar.css @@ -2,22 +2,40 @@ /* top area w/ month title and buttons */ .full-calendar-header { - text-align: left; + } + +.full-calendar-title { + float: left; + margin-top: 0; + } + +.r2l .full-calendar-title { + float: right; } .full-calendar-buttons { float: right; + margin-bottom: 1em; + } + +.r2l .full-calendar-buttons { + float: left; } .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; } .full-calendar-prev, .full-calendar-next { width: 40px; - margin-left: 5px; } @@ -31,6 +49,7 @@ reason for our long-winded border css. borders now look consistent across doctypes. */ border: 1px solid #ccc; /* border color & style */ + text-align: left; } .full-calendar-month table { @@ -38,7 +57,7 @@ border-spacing: 0; } -.full-calendar-month th.day-heading, +.full-calendar-month th, .full-calendar-month td.day { padding: 0; vertical-align: top; @@ -47,12 +66,13 @@ border-width: 1px 0 0 1px; } -.full-calendar-month tr.day-headings th { +.full-calendar-month th { border-top: 0; + text-align: center; } -.full-calendar-month th.sun, -.full-calendar-month td.sun { +.full-calendar-month th.first, /* left edge? */ +.full-calendar-month td.first { border-left: 0; } @@ -66,7 +86,11 @@ .full-calendar-month .day-number { text-align: right; - padding-right: 2px; + padding: 0 2px; + } + +.r2l .full-calendar-month .day-number { + text-align: left; } .full-calendar-month .other-month .day-number { @@ -93,6 +117,10 @@ text-align: left; } +.r2l .full-calendar-month .event { + text-align: right; + } + .full-calendar-month .ui-draggable-dragging td { cursor: move; } diff --git a/fullcalendar.js b/fullcalendar.js index e9c59e5..57eb01e 100644 --- a/fullcalendar.js +++ b/fullcalendar.js @@ -29,7 +29,19 @@ options = options || {}; var showTime = typeof options.showTime == 'undefined' ? 'guess' : options.showTime; - var bo = options.buttons; + 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) { + dis = -1; + dit = 6; + this.addClass('r2l'); + }else{ + dis = 1; + dit = 0; + } this.each(function() { @@ -80,40 +92,31 @@ var titleElement, todayButton, monthElement; var header = $("
").appendTo(this); - if (bo != false) { - var buttons = $("
").appendTo(header); - todayButton = - $("") - .click(today); - var prevButton = - $("") - .click(prevMonth); - var nextButton = - $("") - .click(nextMonth); - if (typeof bo == 'object') { - if (bo.today != false) { - if (typeof bo.today == 'string') todayButton.val(bo.today); - buttons.append(todayButton); - } - if (bo.prev != false) { - if (typeof bo.prev == 'string') prevButton.val(bo.prev); - buttons.append(prevButton); - } - if (bo.next != false) { - if (typeof bo.next == 'string') nextButton.val(bo.next); - buttons.append(nextButton); - } - }else{ - buttons - .append(todayButton) - .append(prevButton) - .append(nextButton); - } - } - if (options.title !== false) titleElement = $("

").appendTo(header); + + if (bo) { + var buttons = $("
").appendTo(header); + var prevButton, nextButton; + if (bo == true || bo.today != false) { + todayButton = $("") + .appendTo(buttons) + .click(today); + if (typeof bo.today == 'string') todayButton.val(bo.today); + } + if (bo == true || bo.prev != false) { + prevButton = $("") + .appendTo(buttons) + .click(prevMonth); + if (typeof bo.prev == 'string') prevButton.val(bo.prev); + } + if (bo == true || bo.next != false) { + nextButton = $("") + .appendTo(buttons) + .click(nextMonth); + if (typeof bo.next == 'string') nextButton.val(bo.next); + } + } monthElement = $("
").appendTo(this); @@ -122,7 +125,7 @@ - var tbody, glass, monthTitle; + var thead, tbody, glass, monthTitle; function render() { @@ -136,10 +139,10 @@ clearTime(date); start = cloneDate(date); - addDays(start, -start.getDay()); + addDays(start, -start.getDay() + weekStart); end = cloneDate(date); addMonths(end, 1); - addDays(end, (7 - end.getDay()) % 7); + addDays(end, (7 - end.getDay() + weekStart) % 7); numWeeks = Math.round((end.getTime() - start.getTime()) / 604800000); if (options.fixedWeeks != false) { addDays(end, (6 - numWeeks) * 7); @@ -156,32 +159,40 @@ } if (!tbody) { - - tbody = ""; - for (var i=0; i<7; i++) { - tbody += - "" + - (options.abbrevDayHeadings!=false ? dayAbbrevs[i] : dayNames[i]) + + + var table = $("").appendTo(monthElement); + + thead = ""; + for (var i=0; i<7; i++) { + var j = (i * dis + dit + weekStart) % 7; + thead += + ""; } + thead = $(thead + "").appendTo(table); + + tbody = ""; var d = cloneDate(start); for (var i=0; i"; + var tds = ""; for (var j=0; j<7; j++) { - tbody += - ""; + if (r2l) tds = s + tds; + else tds += s; addDays(d, 1); } - tbody += ""; + tbody += tds + ""; } - tbody += ""; - tbody = $(tbody) - .appendTo($("
" + + (options.abbrevDayHeadings!=false ? dayAbbrevs[j] : dayNames[j]) + "
" + d.getDate() + "
" + "
") - .appendTo(monthElement)); + tbody = $(tbody + "").appendTo(table); glass = $("
") .appendTo(monthElement) @@ -195,9 +206,9 @@ }else{ - var diff = numWeeks - (tbody.find('tr').length - 1); + var diff = numWeeks - tbody.find('tr').length; if (diff < 0) { - tbody.find('tr:gt(' + numWeeks + ')').remove(); + tbody.find('tr:gt(' + (numWeeks-1) + ')').remove(); } else if (diff > 0) { var trs = ""; @@ -205,7 +216,9 @@ trs += "
"; for (var j=0; j<7; j++) { trs += - ""; @@ -216,19 +229,22 @@ } var d = cloneDate(start); - tbody.find('td').each(function() { - if (d.getMonth() == month) { - $(this).removeClass('other-month'); - }else{ - $(this).addClass('other-month'); + tbody.find('tr').each(function() { + for (var i=0; i<7; i++) { + var td = this.childNodes[i * dis + dit]; + if (d.getMonth() == month) { + $(td).removeClass('other-month'); + }else{ + $(td).addClass('other-month'); + } + if (d.getTime() == today.getTime()) { + $(td).addClass('today'); + }else{ + $(td).removeClass('today'); + } + $(td.childNodes[0]).text(d.getDate()); + addDays(d, 1); } - if (d.getTime() == today.getTime()) { - $(this).addClass('today'); - }else{ - $(this).removeClass('today'); - } - $(this.childNodes[0]).text(d.getDate()); - addDays(d, 1); }); } @@ -240,7 +256,7 @@ var jsonOptions = {}; jsonOptions[options.startParam || 'start'] = Math.round(start.getTime() / 1000); jsonOptions[options.endParam || 'end'] = Math.round(end.getTime() / 1000); - jsonOptions['_t'] = (new Date()).getTime(); + jsonOptions[options.cacheParam || '_t'] = (new Date()).getTime(); $.getJSON(options.events, jsonOptions, function(data) { events = cleanEvents(data); renderEvents(events); @@ -345,7 +361,7 @@ function _renderEvents() { for (var i=0; i") .append("" + - (seg.isStart ? "") + (roundE ? "") .append("" + - (seg.isStart ? "") + (roundE ? "") .append("" + - (seg.isStart ? ""); + (roundE ? ""); buildEventText(element.find('td.c'), event, - typeof event.showTime == 'undefined' ? showTime : event.showTime); + typeof event.showTime == 'undefined' ? showTime : event.showTime, r2l); if (options.eventRender) { var res = options.eventRender(event, element); if (typeof res != 'undefined') { @@ -529,7 +559,7 @@ dayX0 = o.left; dayY0 = o.top; dayY = []; - tbody.find('tr:gt(0)').each(function() { + tbody.find('tr').each(function() { tr = $(this); dayY.push(tr.position().top); }); @@ -553,7 +583,7 @@ else if (!currTD || r != currR || c != currC) { currR = r; currC = c; - currTD = tbody.find('tr:eq('+(r+1)+') td:eq('+c+')').get(0); + currTD = tbody.find('tr:eq('+r+') td:eq('+c+')').get(0); currTDX = dayX[c]; currTDY = dayY[r]; currTDW = dayX[c+1] - currTDX; @@ -573,10 +603,14 @@ } function dayDelta(node1, node2) { - var i1, i2, tds = tbody.get(0).getElementsByTagName('td'); - for (var i=0; i") - .text((h%12 || 12) + (h<12 ? 'a' : 'p') + ' ')); + var timeText = (h%12 || 12) + (h<12 ? 'a' : 'p'); + if (r2l) timeText = ' ' + timeText; + else timeText += ' '; + element.append($("").text(timeText)); } } - element.append($("") - .text(event.title)); + var et = $("").text(event.title) + if (r2l) element.prepend(et); + else element.append(et); }
" + + "" + "
" + "
" + "
" : '') + + (roundW ? "" : '') + "" + - (seg.isEnd ? "" : '') + "
" : '') + "
" : '') + + (roundW ? "" : '') + "" + - (seg.isEnd ? "" : '') + "
" : '') + "
" : '') + + (roundW ? "" : '') + "" + - (seg.isEnd ? "" : '') + "
" : '') + "