Skip to content

Instantly share code, notes, and snippets.

@blainekasten

blainekasten/jquery.weekcalendar.css

Created March 28, 2013 15:55
Show Gist options
  • Save blainekasten/5264336 to your computer and use it in GitHub Desktop.
Save blainekasten/5264336 to your computer and use it in GitHub Desktop.
Download ZIP
Backbone Calendar Structure
Raw
gistfile1.txt
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel='stylesheet' type='text/css' href='js/libs/css/smoothness/jquery-ui-1.8.11.custom.css' />
</head>
<body>
<script type="text/html" id="CalendarTemplate">
<div id="calendar" style="border:2px solid black;">
<div class="ui-widget wc-container">
<div class="ui-widget-header wc-toolbar">
<div class="wc-display ui-buttonset">
<input type="radio" id="wc-switch-display-5" name="wc-switch-display" class="wc-switch-display ui-helper-hidden-accessible" value="5">
<label for="wc-switch-display-5" class="ui-state-active ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" aria-pressed="true" role="button" aria-disabled="false">
<span class="ui-button-text">Work week</span>
</label>
<input type="radio" id="wc-switch-display-7" name="wc-switch-display" class="wc-switch-display ui-helper-hidden-accessible" value="7">
<label for="wc-switch-display-7" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false">
<span class="ui-button-text">Weekend work</span>
</label>
</div>
<div class="wc-nav ui-buttonset">
<button class="wc-prev ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-left" role="button" aria-disabled="false" title="previous">
<span class="ui-button-icon-primary ui-icon ui-icon-seek-prev"></span>
<span class="ui-button-text">previous</span>
</button>
<button class="wc-today ui-button ui-widget ui-state-default ui-button-text-icon-primary" role="button" aria-disabled="false">
<span class="ui-button-icon-primary ui-icon ui-icon-home"></span>
<span class="ui-button-text">today</span>
</button>
<button class="wc-next ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right" role="button" aria-disabled="false" title="next">
<span class="ui-button-icon-primary ui-icon ui-icon-seek-next"></span>
<span class="ui-button-text">next</span>
</button>
</div>
<h1 class="wc-title" style="height: 22px; line-height: 22px; ">
<%= calWeek %>
</h1>
</div>
<div class="wc-display ui-buttonset">
<select class="userPopupList">
<option value=1></option>
<option value=1>userA</option>
</select>
</div>
<div class="ui-widget-content wc-header">
<table>
<tbody>
<tr>
<td class="wc-time-column-header"></td>
<td class="wc-day-column-header wc-day-1">
Monday<br><%= monday %>
</td>
<td class="wc-day-column-header wc-day-2">
Tuesday<br><%= tuesday %>
</td>
<td class="wc-day-column-header wc-day-3">
Wednesday<br><%= wednesday %>
</td>
<td class="wc-day-column-header wc-day-4">
Thursday<br><%= thursday %></td>
<td class="wc-day-column-header wc-day-5">
Friday<br><%= friday %></td>
<td class="wc-scrollbar-shim" style="width: 15px; ">
</td>
</tr>
</tbody>
</table>
</div>
<div class="wc-scrollable-grid" style="height: 537px; ">
<table class="wc-time-slots">
<tbody>
<tr class="wc-grid-row-timeslot">
<td class="wc-grid-timeslot-header"></td>
<td colspan="5">
<div class="wc-no-height-wrapper wc-time-slot-wrapper">
<div class="wc-time-slots">
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
<div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot" style="height: 19px; "></div><div class="wc-time-slot wc-hour-end" style="height: 19px; "></div>
</div>
</div>
</td>
</tr>
<tr class="wc-grid-row-events">
<td class="wc-grid-timeslot-header">
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
6<span class="wc-am-pm">AM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
7<span class="wc-am-pm">AM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
8<span class="wc-am-pm">AM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
9<span class="wc-am-pm">AM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
10<span class="wc-am-pm">AM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
11<span class="wc-am-pm">AM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
12<span class="wc-am-pm">PM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
1<span class="wc-am-pm">PM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
2<span class="wc-am-pm">PM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
3<span class="wc-am-pm">PM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
4<span class="wc-am-pm">PM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
5<span class="wc-am-pm">PM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
6<span class="wc-am-pm">PM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
7<span class="wc-am-pm">PM</span>
</div>
</div>
<div class="wc-hour-header ui-state-active wc-business-hours">
<div class="wc-time-header-cell" style="height: 229px; padding: 5px; ">
8<span class="wc-am-pm">PM</span>
</div>
</div>
</td>
<div id="calEventWrapper">
<td class="ui-state-default wc-day-column wc-day-column-first wc-day-column-last day-1">
<div class="wc-full-height-column wc-day-column-inner day-1 ui-droppable" style="height: 1200px; ">
</div>
</td>
<td class="ui-state-default wc-day-column wc-day-column-first wc-day-column-last day-2">
<div class="wc-full-height-column wc-day-column-inner day-2 ui-droppable" style="height: 1200px; ">
</div>
</td>
<td class="ui-state-default wc-day-column wc-day-column-first wc-day-column-last day-3">
<div class="wc-full-height-column wc-day-column-inner day-3 ui-droppable" style="height: 1200px; ">
</div>
</td>
<td class="ui-state-default wc-day-column wc-day-column-first wc-day-column-last day-4">
<div class="wc-full-height-column wc-day-column-inner day-4 ui-droppable" style="height: 1200px; ">
</div>
</td>
<td class="wc-day-column wc-day-column-first wc-day-column-last day-5 ui-state-active">
<div class="wc-full-height-column wc-day-column-inner day-5 ui-droppable" style="height: 1200px; ">
</div>
</td>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script>
vkapp.CalInfo = Backbone.Model.extend({
defaults: {
calWeek: '', //Header for top of calendar
monday: '',
tuesday: '',
wednesday: '',
thursday: '',
friday: '',
saturday: ''
}
});
vkapp.CalendarView = Backbone.View.extend({
template: _.template($('#CalendarTemplate').html()),
className: 'calendar',
initialize: function(){
var d = new Date();
var week = this._setWeekHeader(d);
var days = this._getDays(d);
this.render(week, days);
},
events: {
'click .wc-next' : 'moveForward',
'click .wc-prev' : 'moveBackward',
'click .wc-today' : 'moveToToday',
'click .wc-day-column' : 'createEventOnDrag'
},
render: function(week, days){
for (var i; i < 5; i ++)
var view = new vkapp.EventRecordView({model: vkapp.events});
this._setHighlightedDay();
this.$el.html(this.template(this.model.toJSON()));
$(this.el).html(view);
$('body').append(this.$el);
},
/*@
@ Navigation events
@*/
moveForward: function(){
var curD = this.model.get('monday'),
newDate = new Date(curD.getTime() + (168 * 60 * 60 * 1000)),
week = this._setWeekHeader(newDate),
days = this._getDays(newDate);
this.$el.html(this.template(this.model.toJSON()));
},
moveBackward: function(){
var curD = this.model.get('monday'),
newDate = new Date(curD.getTime() + (-168 * 60 * 60 * 1000)),
week = this._setWeekHeader(newDate),
days = this._getDays(newDate);
this.$el.html(this.template(this.model.toJSON()));
},
moveToToday: function(){
var today = new Date(),
week = this._setWeekHeader(today),
days = this._getDays(today);
this.$el.html(this.template(this.model.toJSON()));
},
/*@
@ Event Creation
@*/
createEventOnDrag: function(){
var newEvent = new vkapp.EventRecordView({model: vkapp.events});
this.$el.add(newEvent);
},
_setHighlightedDay: function(){
//class ui-state-active wc-today for td class "wc-day-column-header wc-day-*"
},
_setWeekHeader: function(d){
d = this._getMonday(d);
var ld = new Date(d.getTime() + (96 * 60 * 60 * 1000));
d = this._monthNames(d.getMonth()) + " " + d.getDate() + ", " + d.getFullYear();
ld = this._monthNames(ld.getMonth()) + " " + ld.getDate() + ", " + ld.getFullYear();
this.model.set("calWeek", d + " - " + ld);
return d + " - " + ld;
},
_getDays: function(d){
monday = this._getMonday(d);
tuesday = new Date(d.getTime() + (24 * 60 * 60 * 1000)),
wednesday = new Date(d.getTime() + (48 * 60 * 60 * 1000)),
thursday = new Date(d.getTime() + (72 * 60 * 60 * 1000)),
friday = new Date(d.getTime() + (96 * 60 * 60 * 1000));
this.model.set('monday', monday);
this.model.set('tuesday', tuesday);
this.model.set('wednesday', wednesday);
this.model.set('thursday', thursday);
this.model.set('friday', friday);
return [
this._convertDateForHeader(monday),
this._convertDateForHeader(tuesday),
this._convertDateForHeader(wednesday),
this._convertDateForHeader(thursday),
this._convertDateForHeader(friday),
];
},
_getMonday: function(d){
var day = d.getDay(),
diff = d.getDate() - day + (day == 0 ? -6:1), // adjust when day is sunday
mon = new Date(d.setDate(diff));
this.model.set('monday', mon);
return mon;
},
_convertDateForHeader: function(date){
var monthToTranslate = date.getMonth();
return this._monthNames(monthToTranslate)+ " " + date.getDate() + ", " + date.getFullYear();
},
_monthNames: function(monthToTranslate){
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
return month[monthToTranslate];
},
});
var a = new vkapp.CalInfo();
new vkapp.CalendarView({model: a});
</script>
Raw
jquery.weekcalendar.css
.wc-container {
font-size: 14px;
font-family: arial, helvetica;
}
.wc-toolbar {
padding: 1em;
font-size:0.8em;
}
.wc-toolbar .wc-nav {
float:left;
}
.wc-toolbar .wc-display {
float: right;
}
.wc-toolbar button {
margin-top: 0;
margin-bottom: 0;
}
/* dates next to toolbar buttons */
.wc-toolbar .wc-title {
font-size: 14px;
color: #272727;
text-align: center;
text-shadow:#42bffb 0px 0px 2px;
padding:0;
margin:0;
}
.wc-container table {
border-collapse: collapse;
border-spacing: 0;
}
.wc-container table td {
margin: 0;
padding: 0;
}
.wc-header {
background: #eee;
border-width:1px 0;
border-style:solid;
}
.wc-header table{
width: 100%;
table-layout:fixed;
}
.wc-grid-timeslot-header,
.wc-header .wc-time-column-header {
width: 45px;
}
.wc-header .wc-scrollbar-shim {
width: 16px;
}
.wc-header .wc-day-column-header {
text-align: center;
padding: 0.4em;
}
.wc-header .wc-user-header{
text-align: center;
padding: 0.4em 0;
overflow:hidden;
}
.wc-grid-timeslot-header {
background: #eee;
}
.wc-scrollable-grid {
overflow: auto;
overflow-x: hidden !important;
overflow-y: auto !important;
position: relative;
background-color: #fff;
width: 100%;
}
table.wc-time-slots {
width: 100%;
table-layout: fixed;
cursor: default;
overflow:hidden;
}
.wc-day-column {
width: 13.5%;
overflow: visible;
vertical-align: top;
}
.wc-day-column-header{border-width: 0 0 1px 3px; border-style: solid;border-color:transparent;}
.wc-scrollable-grid .wc-day-column-last,
.wc-scrollable-grid .wc-day-column-middle{border-width: 0 0 0 1px; border-style: dashed;}
.wc-scrollable-grid .wc-day-column-first{border-width: 0 0 0 3px; border-style: double;}
.wc-day-column-inner {
width: 100%;
position:relative;
}
.wc-no-height-wrapper{
position:relative;
overflow: visible;
height: 0px;
}
.wc-time-slot-wrapper {
/* top: 3px;*/
}
.wc-oddeven-wrapper .wc-full-height-column{
/* top: 2px; */
/* Modern Browsers */ opacity: 0.4;
/* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
/* IE 5-7 */ filter: alpha(opacity=40);
/* Netscape */ -moz-opacity: 0.4;
/* Safari 1 */ -khtml-opacity: 0.4;
}
.wc-freebusy-wrapper .wc-freebusy{
/* top: 1px;*/
/* Modern Browsers */ opacity: 0.4;
/* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
/* IE 5-7 */ filter: alpha(opacity=40);
/* Netscape */ -moz-opacity: 0.4;
/* Safari 1 */ -khtml-opacity: 0.4;
}
.wc-time-slots {
position: absolute;
width: 100%;
}
.wc-column-odd,
.wc-column-even.ui-state-hover{background-image:none;border:none;}
.wc-header .wc-today.ui-state-active{background-image:none;}
.wc-header .wc-today.wc-day-column-header{border-width:0 3px; border-style: solid;}
.wc-header .wc-user-header{border-width:0;}
.wc-time-slots .wc-day-column.ui-state-default{background:transparent;}
.wc-time-slots .wc-today.ui-state-active{background-image:none;}
.wc-header .wc-today.ui-state-active.wc-day-column-middle{border-width:0;}
.wc-header .wc-today.ui-state-active.wc-day-column-first{border-left-width:3px;}
.wc-header .wc-today.ui-state-active.wc-day-column-last{border-right-width:3px;}
.wc-full-height-column{
display:block;
/* width:100%;*/
}
.wc-time-header-cell {
padding: 5px;
height: 80px; /* reference height */
}
.wc-time-slot {
border-bottom: 1px dotted #ddd;
}
.wc-hour-header {
text-align: right;
}
.wc-hour-header.ui-state-active,
.wc-hour-header.ui-state-default{
border-width:0 0 1px 0;
}
.wc-hour-end, .wc-hour-header {
border-bottom: 1px solid #ccc;
color: #555;
}
.wc-business-hours {
background-color: #E6EEF1;
border-bottom: 1px solid #ccc;
color: #333;
font-size: 1.4em;
}
.wc-business-hours .wc-am-pm {
font-size: 0.6em;
}
.wc-day-header-cell {
text-align: center;
vertical-align: middle;
padding: 5px;
}
.wc-time-slot-header .wc-header-cell {
text-align: right;
padding-right: 10px;
}
.wc-cal-event {
background-color: #68a1e5;
/* Modern Browsers */ opacity: 0.8;
/* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* IE 5-7 */ filter: alpha(opacity=80);
/* Netscape */ -moz-opacity: 0.8;
/* Safari 1 */ -khtml-opacity: 0.8;
position: absolute;
text-align: center;
overflow: hidden;
cursor: pointer;
color: #fff;
width: 100%;
display: none;
}
.wc-cal-event-delete {
float: right;
cursor: pointer;
width: 16px;
height: 16px;
}
.wc-cal-event.ui-resizable-resizing {
cursor: s-resize;
}
.wc-cal-event .wc-time {
background-color: #2b72d0;
border: 1px solid #1b62c0;
color: #fff;
padding: 0;
font-weight: bold;
}
.wc-container .ui-draggable .wc-time {
cursor: move;
}
.wc-cal-event .wc-title {
position: relative;
}
.wc-container .ui-resizable-s {
height: 10px;
line-height: 10px;
bottom: -2px;
font-size: .75em;
}
.wc-container .ui-draggable-dragging {
z-index: 1000;
}
.free-busy-free{}
.free-busy-busy{
background:url("./libs/css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png") repeat scroll 50% 50% #666666;
}
/** hourLine */
.wc-hourline {
height: 0pt;
border-top: 2px solid #FF7F6E;
overflow: hidden;
position: absolute;
width: inherit;
}
/* IE6 hacks */
* html .wc-no-height-wrapper{position:absolute;}
* html .wc-time-slot-wrapper{top:3px;}
* html .wc-grid-row-oddeven{top:2px;}
* html .wc-grid-row-freebusy{top:1px;}
/* IE7 hacks */
*:first-child+html .wc-no-height-wrapper{position:relative;}
*:first-child+html .wc-time-slot-wrapper{top:3px;}
*:first-child+html .wc-grid-row-oddeven{top:2px;}
*:first-child+html .wc-grid-row-freebusy{top:1px;}
*:first-child+html .wc-time-slots .wc-today{/* due to rendering issues, no background */background:none;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment