mirror of
https://github.com/wassname/fullcalendar.git
synced 2026-08-14 12:20:24 +08:00
Use CSS3 rounded corners instead of ghetto hack. Remove unnecessary markup for events and buttons.
And slightly change style of agenda events (no more differently colored event header). And remove glossy-look CSS hack for buttons.
This commit is contained in:
Adam Shaw
@@ -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');
|
||||
}
|
||||
|
||||
+6
-11
@@ -72,17 +72,12 @@ function Header(calendar, options) {
|
||||
var text = smartProperty(options.buttonText, buttonName); // why are we using smartProperty here?
|
||||
var button = $(
|
||||
"<span class='fc-button fc-button-" + buttonName + " " + tm + "-state-default'>" +
|
||||
"<span class='fc-button-inner'>" +
|
||||
"<span class='fc-button-content'>" +
|
||||
(icon ?
|
||||
"<span class='fc-icon-wrap'>" +
|
||||
"<span class='ui-icon ui-icon-" + icon + "'/>" +
|
||||
"</span>" :
|
||||
text
|
||||
) +
|
||||
"</span>" +
|
||||
"<span class='fc-button-effect'><span></span></span>" +
|
||||
"</span>" +
|
||||
(icon ?
|
||||
"<span class='fc-icon-wrap'>" +
|
||||
"<span class='ui-icon ui-icon-" + icon + "'/>" +
|
||||
"</span>" :
|
||||
text
|
||||
) +
|
||||
"</span>"
|
||||
);
|
||||
if (button) {
|
||||
|
||||
@@ -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 + "'" +
|
||||
">" +
|
||||
"<div class='fc-event-inner fc-event-skin'" + skinCssAttr + ">" +
|
||||
"<div class='fc-event-head fc-event-skin'" + skinCssAttr + ">" +
|
||||
"<div class='fc-event-time'>" +
|
||||
htmlEscape(formatDates(event.start, event.end, opt('timeFormat'))) +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"<div class='fc-event-content'>" +
|
||||
"<div class='fc-event-title'>" +
|
||||
htmlEscape(event.title) +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"<div class='fc-event-bg'></div>" +
|
||||
"</div>"; // close inner
|
||||
"<div class='fc-event-bg'></div>";
|
||||
if (seg.isEnd && isEventResizable(event)) {
|
||||
html +=
|
||||
"<div class='ui-resizable-handle ui-resizable-s'>=</div>";
|
||||
@@ -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;
|
||||
|
||||
+17
-7
@@ -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;
|
||||
|
||||
@@ -136,28 +136,22 @@ function DayEventRenderer() {
|
||||
for (i=0; i<segCnt; i++) {
|
||||
seg = segs[i];
|
||||
event = seg.event;
|
||||
classes = ['fc-event', 'fc-event-skin', 'fc-event-hori'];
|
||||
classes = ['fc-event', 'fc-event-hori'];
|
||||
if (isEventDraggable(event)) {
|
||||
classes.push('fc-event-draggable');
|
||||
}
|
||||
if (seg.isStart) {
|
||||
classes.push('fc-event-start');
|
||||
}
|
||||
if (seg.isEnd) {
|
||||
classes.push('fc-event-end');
|
||||
}
|
||||
if (rtl) {
|
||||
if (seg.isStart) {
|
||||
classes.push('fc-corner-right');
|
||||
}
|
||||
if (seg.isEnd) {
|
||||
classes.push('fc-corner-left');
|
||||
}
|
||||
leftCol = dayOfWeekCol(seg.end.getDay()-1);
|
||||
rightCol = dayOfWeekCol(seg.start.getDay());
|
||||
left = seg.isEnd ? colContentLeft(leftCol) : minLeft;
|
||||
right = seg.isStart ? colContentRight(rightCol) : maxLeft;
|
||||
}else{
|
||||
if (seg.isStart) {
|
||||
classes.push('fc-corner-left');
|
||||
}
|
||||
if (seg.isEnd) {
|
||||
classes.push('fc-corner-right');
|
||||
}
|
||||
leftCol = dayOfWeekCol(seg.start.getDay());
|
||||
rightCol = dayOfWeekCol(seg.end.getDay()-1);
|
||||
left = seg.isStart ? colContentLeft(leftCol) : minLeft;
|
||||
@@ -177,10 +171,6 @@ function DayEventRenderer() {
|
||||
html +=
|
||||
" class='" + classes.join(' ') + "'" +
|
||||
" style='position:absolute;z-index:8;left:"+left+"px;" + skinCss + "'" +
|
||||
">" +
|
||||
"<div" +
|
||||
" class='fc-event-inner fc-event-skin'" +
|
||||
(skinCss ? " style='" + skinCss + "'" : '') +
|
||||
">";
|
||||
if (!event.allDay && seg.isStart) {
|
||||
html +=
|
||||
@@ -189,8 +179,7 @@ function DayEventRenderer() {
|
||||
"</span>";
|
||||
}
|
||||
html +=
|
||||
"<span class='fc-event-title'>" + htmlEscape(event.title) + "</span>" +
|
||||
"</div>";
|
||||
"<span class='fc-event-title'>" + htmlEscape(event.title) + "</span>";
|
||||
if (seg.isEnd && isEventResizable(event)) {
|
||||
html +=
|
||||
"<div class='ui-resizable-handle ui-resizable-" + (rtl ? 'w' : 'e') + "'>" +
|
||||
@@ -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
|
||||
|
||||
+44
-140
@@ -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
|
||||
------------------------------------------------------------*/
|
||||
|
||||
|
||||
+3
-29
@@ -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;
|
||||
|
||||
+2
-5
@@ -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 */
|
||||
}
|
||||
|
||||
|
||||
+3
-6
@@ -152,18 +152,15 @@
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.red-event,
|
||||
.red-event .fc-event-skin {
|
||||
.red-event {
|
||||
background: red !important;
|
||||
}
|
||||
|
||||
.yellow-event,
|
||||
.yellow-event .fc-event-skin {
|
||||
.yellow-event {
|
||||
background: yellow !important;
|
||||
}
|
||||
|
||||
.black-text-event,
|
||||
.black-text-event .fc-event-skin {
|
||||
.black-text-event {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user