diff --git a/src/Calendar.js b/src/Calendar.js index d32595b..1445b75 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -80,6 +80,9 @@ function Calendar(element, options, eventSources) { if (options.isRTL) { element.addClass('fc-rtl'); } + else { + element.addClass('fc-ltr'); + } if (options.theme) { element.addClass('ui-widget'); } diff --git a/src/Header.js b/src/Header.js index 8875fa1..0d91ae2 100644 --- a/src/Header.js +++ b/src/Header.js @@ -72,17 +72,12 @@ function Header(calendar, options) { var text = smartProperty(options.buttonText, buttonName); // why are we using smartProperty here? var button = $( "" + - "" + - "" + - (icon ? - "" + - "" + - "" : - text - ) + - "" + - "" + - "" + + (icon ? + "" + + "" + + "" : + text + ) + "" ); if (button) { diff --git a/src/agenda/AgendaEventRenderer.js b/src/agenda/AgendaEventRenderer.js index 18f7897..01b5a8e 100644 --- a/src/agenda/AgendaEventRenderer.js +++ b/src/agenda/AgendaEventRenderer.js @@ -158,7 +158,7 @@ function AgendaEventRenderer() { vsideCache={}, hsideCache={}, key, val, - contentElement, + titleElement, height, slotSegmentContainer = getSlotSegmentContainer(), rtl, dis, dit, @@ -247,9 +247,9 @@ function AgendaEventRenderer() { seg.vsides = val === undefined ? (vsideCache[key] = vsides(eventElement, true)) : val; val = hsideCache[key]; seg.hsides = val === undefined ? (hsideCache[key] = hsides(eventElement, true)) : val; - contentElement = eventElement.find('div.fc-event-content'); - if (contentElement.length) { - seg.contentTop = contentElement[0].offsetTop; + titleElement = eventElement.find('.fc-event-title'); + if (titleElement.length) { + seg.contentTop = titleElement[0].offsetTop; } } } @@ -263,7 +263,7 @@ function AgendaEventRenderer() { eventElement[0].style.height = height + 'px'; event = seg.event; if (seg.contentTop !== undefined && height - seg.contentTop < 10) { - // not enough room for title, put it in the time header + // not enough room for title, put it in the time (TODO: maybe make both display:inline instead) eventElement.find('div.fc-event-time') .text(formatDate(event.start, opt('timeFormat')) + ' - ' + event.title); eventElement.find('div.fc-event-title') @@ -280,16 +280,15 @@ function AgendaEventRenderer() { var html = "<"; var url = event.url; var skinCss = getSkinCss(event, opt); - var skinCssAttr = (skinCss ? " style='" + skinCss + "'" : ''); - var classes = ['fc-event', 'fc-event-skin', 'fc-event-vert']; + var classes = ['fc-event', 'fc-event-vert']; if (isEventDraggable(event)) { classes.push('fc-event-draggable'); } if (seg.isStart) { - classes.push('fc-corner-top'); + classes.push('fc-event-start'); } if (seg.isEnd) { - classes.push('fc-corner-bottom'); + classes.push('fc-event-end'); } classes = classes.concat(event.className); if (event.source) { @@ -304,19 +303,13 @@ function AgendaEventRenderer() { " class='" + classes.join(' ') + "'" + " style='position:absolute;z-index:8;top:" + seg.top + "px;left:" + seg.left + "px;" + skinCss + "'" + ">" + - "
" + - "
" + "
" + htmlEscape(formatDates(event.start, event.end, opt('timeFormat'))) + "
" + - "
" + - "
" + "
" + htmlEscape(event.title) + "
" + - "
" + - "
" + - "
"; // close inner + "
"; if (seg.isEnd && isEventResizable(event)) { html += "
=
"; @@ -559,7 +552,9 @@ function AgendaEventRenderer() { var granularityHeight = getGranularityHeight(); var granularityMinutes = getGranularityMinutes(); eventElement.resizable({ - handles: 's', + handles: { + s: '.ui-resizable-handle', + }, grid: granularityHeight, start: function(ev, ui) { granularityDelta = prevGranularityDelta = 0; diff --git a/src/agenda/agenda.css b/src/agenda/agenda.css index 6f46bed..1001e93 100644 --- a/src/agenda/agenda.css +++ b/src/agenda/agenda.css @@ -96,19 +96,29 @@ .fc-event-vert { border-width: 0 1px; } - -.fc-event-vert .fc-event-head, -.fc-event-vert .fc-event-content { - position: relative; - z-index: 2; - width: 100%; - overflow: hidden; + +.fc-event-vert.fc-event-start { + border-top-width: 1px; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + +.fc-event-vert.fc-event-end { + border-bottom-width: 1px; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; } .fc-event-vert .fc-event-time { white-space: nowrap; font-size: 10px; } + +.fc-event-vert .fc-event-time, +.fc-event-vert .fc-event-title { + position: relative; + z-index: 2; + } .fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay */ position: absolute; diff --git a/src/common/DayEventRenderer.js b/src/common/DayEventRenderer.js index 0430c69..c154062 100644 --- a/src/common/DayEventRenderer.js +++ b/src/common/DayEventRenderer.js @@ -136,28 +136,22 @@ function DayEventRenderer() { for (i=0; i" + - ""; if (!event.allDay && seg.isStart) { html += @@ -189,8 +179,7 @@ function DayEventRenderer() { "
"; } html += - "" + htmlEscape(event.title) + "" + - ""; + "" + htmlEscape(event.title) + ""; if (seg.isEnd && isEventResizable(event)) { html += "
" + @@ -386,7 +375,7 @@ function DayEventRenderer() { function resizableDayEvent(event, element, seg) { var rtl = opt('isRTL'); var direction = rtl ? 'w' : 'e'; - var handle = element.find('div.ui-resizable-' + direction); + var handle = element.find('.ui-resizable-' + direction); // TODO: stop using this class because we aren't using jqui for this var isResizing = false; // TODO: look into using jquery-ui mouse widget for this stuff diff --git a/src/common/common.css b/src/common/common.css index 73db495..7ef453e 100644 --- a/src/common/common.css +++ b/src/common/common.css @@ -25,43 +25,37 @@ .fc-button { position: relative; display: inline-block; + padding: 0 .6em; + overflow: hidden; + height: 1.9em; + line-height: 1.9em; + white-space: nowrap; cursor: pointer; } .fc-state-default { /* non-theme */ - border-style: solid; - border-width: 1px 0; + border: 1px solid; } - -.fc-button-inner { - position: relative; - float: left; - overflow: hidden; + +.fc-state-default.fc-corner-left { /* non-theme */ + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; } - -.fc-state-default .fc-button-inner { /* non-theme */ - border-style: solid; - border-width: 0 1px; - } - -.fc-button-content { - position: relative; - float: left; - height: 1.9em; - line-height: 1.9em; - padding: 0 .6em; - white-space: nowrap; + +.fc-state-default.fc-corner-right { /* non-theme */ + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; } /* icon (for jquery ui) */ -.fc-button-content .fc-icon-wrap { +.fc-button .fc-icon-wrap { position: relative; float: left; top: 50%; } -.fc-button-content .ui-icon { +.fc-button .ui-icon { position: relative; float: left; margin-top: -50%; @@ -69,58 +63,31 @@ *top: -50%; } -/* gloss effect */ - -.fc-state-default .fc-button-effect { - position: absolute; - top: 50%; - left: 0; - } - -.fc-state-default .fc-button-effect span { - position: absolute; - top: -100px; - left: 0; - width: 500px; - height: 100px; - border-width: 100px 0 0 1px; - border-style: solid; - border-color: #fff; - background: #444; - opacity: .09; - filter: alpha(opacity=9); - } - /* button states (determines colors) */ -.fc-state-default, -.fc-state-default .fc-button-inner { +.fc-state-default { border-style: solid; border-color: #ccc #bbb #aaa; background: #F3F3F3; color: #000; } -.fc-state-hover, -.fc-state-hover .fc-button-inner { +.fc-state-hover { border-color: #999; } -.fc-state-down, -.fc-state-down .fc-button-inner { +.fc-state-down { border-color: #555; background: #777; } -.fc-state-active, -.fc-state-active .fc-button-inner { +.fc-state-active { border-color: #555; background: #777; color: #fff; } -.fc-state-disabled, -.fc-state-disabled .fc-button-inner { +.fc-state-disabled { color: #999; border-color: #ddd; } @@ -129,56 +96,39 @@ cursor: default; } -.fc-state-disabled .fc-button-effect { - display: none; - } - /* Global Event Styles ------------------------------------------------------------------------*/ .fc-event { - border-style: solid; - border-width: 0; + overflow: hidden; + border: 1px solid #36c; /* default BORDER color */ + background-color: #36c; /* default BACKGROUND color */ + color: #fff; /* default TEXT color */ font-size: .85em; cursor: default; } + +a.fc-event { + text-decoration: none; + } a.fc-event, .fc-event-draggable { cursor: pointer; } -a.fc-event { - text-decoration: none; - } - .fc-rtl .fc-event { text-align: right; } -.fc-event-skin { - border-color: #36c; /* default BORDER color */ - background-color: #36c; /* default BACKGROUND color */ - color: #fff; /* default TEXT color */ - } - -.fc-event-inner { - position: relative; - width: 100%; - height: 100%; - border-style: solid; - border-width: 0; - overflow: hidden; - } - .fc-event-time, .fc-event-title { padding: 0 1px; } -.fc .ui-resizable-handle { /*** TODO: don't use ui-resizable anymore, change class ***/ +.fc .ui-resizable-handle { display: block; position: absolute; z-index: 99999; @@ -196,6 +146,20 @@ a.fc-event { border-width: 1px 0; margin-bottom: 1px; } + +.fc-ltr .fc-event-hori.fc-event-start, +.fc-rtl .fc-event-hori.fc-event-end { + border-left-width: 1px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + +.fc-ltr .fc-event-hori.fc-event-end, +.fc-rtl .fc-event-hori.fc-event-start { + border-right-width: 1px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } /* resizable */ @@ -221,66 +185,6 @@ a.fc-event { -/* Fake Rounded Corners (for buttons and events) -------------------------------------------------------------*/ - -.fc-corner-left { - margin-left: 1px; - } - -.fc-corner-left .fc-button-inner, -.fc-corner-left .fc-event-inner { - margin-left: -1px; - } - -.fc-corner-right { - margin-right: 1px; - } - -.fc-corner-right .fc-button-inner, -.fc-corner-right .fc-event-inner { - margin-right: -1px; - } - -.fc-corner-top { - margin-top: 1px; - } - -.fc-corner-top .fc-event-inner { - margin-top: -1px; - } - -.fc-corner-bottom { - margin-bottom: 1px; - } - -.fc-corner-bottom .fc-event-inner { - margin-bottom: -1px; - } - - - -/* Fake Rounded Corners SPECIFICALLY FOR EVENTS ------------------------------------------------------------------*/ - -.fc-corner-left .fc-event-inner { - border-left-width: 1px; - } - -.fc-corner-right .fc-event-inner { - border-right-width: 1px; - } - -.fc-corner-top .fc-event-inner { - border-top-width: 1px; - } - -.fc-corner-bottom .fc-event-inner { - border-bottom-width: 1px; - } - - - /* Reusable Separate-border Table ------------------------------------------------------------*/ diff --git a/src/common/print.css b/src/common/print.css index 4cee605..5383b3f 100644 --- a/src/common/print.css +++ b/src/common/print.css @@ -15,38 +15,12 @@ /* Events -----------------------------------------------------*/ -.fc-event-skin { - background: none !important; +.fc-event { + background: #fff !important; color: #000 !important; } -/* horizontal events */ - -.fc-event-hori { - border-width: 0 0 1px 0 !important; - border-bottom-style: dotted !important; - border-bottom-color: #000 !important; - padding: 1px 0 0 0 !important; - } - -.fc-event-hori .fc-event-inner { - border-width: 0 !important; - padding: 0 1px !important; - } - -/* vertical events */ - -.fc-event-vert { - border-width: 0 0 0 1px !important; - border-left-style: dotted !important; - border-left-color: #000 !important; - padding: 0 1px 0 0 !important; - } - -.fc-event-vert .fc-event-inner { - border-width: 0 !important; - padding: 1px 0 !important; - } +/* for vertical events */ .fc-event-bg { display: none !important; diff --git a/src/main.css b/src/main.css index 0076e75..2ec5ec8 100644 --- a/src/main.css +++ b/src/main.css @@ -77,11 +77,8 @@ html .fc, margin-right: -1px; } -.fc-header .fc-corner-right { - margin-right: 1px; /* back to normal */ - } - -.fc-header .ui-corner-right { +.fc-header .fc-corner-right, /* non-theme */ +.fc-header .ui-corner-right { /* theme */ margin-right: 0; /* back to normal */ } diff --git a/tests/sources.html b/tests/sources.html index e87f680..9e449d1 100644 --- a/tests/sources.html +++ b/tests/sources.html @@ -152,18 +152,15 @@