Skip to content

Instantly share code, notes, and snippets.

@croxton

croxton/calendar.html

Last active April 8, 2018 02:23
Show Gist options
  • Save croxton/4b331f350785eb033907 to your computer and use it in GitHub Desktop.
Save croxton/4b331f350785eb033907 to your computer and use it in GitHub Desktop.
Download ZIP
Solspace Calendar availability
Raw
calendar.html
{!--
These vars are used as a workaround for a bug in Solspace Calendar that causes
whitespace around if/else conditionals inside {events}...{/events} to be removed.
--}
{exp:stash:first_day_ph}first_day first_day{/exp:stash:first_day_ph}
{exp:stash:last_day_ph}last_day last_day{/exp:stash:last_day_ph}
{exp:stash:open}open {/exp:stash:open}
{exp:stash:Provisional}provisional {/exp:stash:Provisional}
{!-- Availability calendar --}
<section role="region">
<header>
<h2>Availability</h2>
</header>
{exp:calendar:cal
status="open|provisional"
{if segment_3 == ''}
date_range_start="year-month-01"
date_range_end="year-month-last"
{/if}
{if segment_3 != ''}
date_range_start="{segment_3}-{segment_4}-01"
date_range_end="{segment_3}-{segment_4}-last"
{/if}
}
<div id="mc-calendar" aria-describedby="mc-calendar-legend">
{display_each_month}
<table>
<thead>
<tr class="mc_month">
<th colspan="1" class="mc_prev_month">
<a href="{path='{segment_1}/calendar'}/{prev_month format="%Y/%m"}/" aria-controls="mc-calendar">&laquo;</a>
</th>
<th colspan="5">
{date format="%F %Y"}
</th>
<th colspan="1" class="mc_next_month">
<a href="{path='{segment_1}/calendar'}/{next_month format="%Y/%m"}/" aria-controls="mc-calendar">&raquo;</a>
</th>
</tr>
<tr class="mc_days">
{display_each_day_of_week}
<th scope="col" class="{if day_of_week_is_weekend}weekend{/if} {if day_of_week_is_current}current{/if}">
{day_of_week_one}
</th>
{/display_each_day_of_week}
</tr>
</thead>
<tbody>
{display_each_week}
<tr>
{display_each_day}
<td class="
{if day_in_current_month == FALSE}mc_pad{/if}
{if day_event_total > 0}has_events{/if}
{if day_is_today}today{/if}
{if day_is_weekend}weekend{/if}
{if day_is_weekday}weekday{/if}
{events}
{exp:stash:get name="{status}" process="end"}
{if event_first_day}
{exp:stash:get name="first_day_ph" process="end"}_{exp:stash:get name="{status}" process="end"}
{/if}
{if event_last_day}
{exp:stash:get name="last_day_ph" process="end"}_{exp:stash:get name="{status}" process="end"}
{/if}
{/events}
">
{if day_in_current_month}
{day}
{if:else}
<strong class="middot">&middot;</strong>
{/if}
</td>
{/display_each_day}
</tr>
{/display_each_week}
</tbody>
</table>
{/display_each_month}
</div>
{/exp:calendar:cal}
<dl class="legend" id="mc-calendar-legend">
<dt class="legend-available">Green</dt>
<dd>Available</dd>
<dt class="legend-provisional">Yellow</dt>
<dd>Pending</dd>
<dt class="legend-booked">Red</dt>
<dd>Booked</dd>
</dl>
</section>
{!--
SCSS - replace $variables with your own values, compile and put in <head>
Note: using Modernizr
--}
<style>
$color-booked: #D64E53;
$olor-provisional: #EBBE5B;
$color-available: #78B36E;
#mc-calendar table {
width: 100%;
padding: 5px;
border-collapse: collapse;
}
#mc-calendar th {
padding: 6px 3px;
font-weight: normal;
}
.mc_month {
color: #FFF;
background: #378BA6;
}
.mc_prev_month, .mc_next_month {
background: #287690;
}
.mc_prev_month a, .mc_next_month a {
color: #FFF;
}
.csstransforms .mc_prev_month a, .csstransforms .mc_next_month a {
color: transparent;
display: block;
position: relative;
text-align: center;
height: 4px;
width: 14px;
left: 50%;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.csstransforms .mc_prev_month a:before, .csstransforms .mc_next_month a:before {
content: '';
position: absolute;
top: 7px;
left: 0;
height: 100%;
width: 51%;
background: #FFF;
-webkit-transform: skew(0deg, 40deg);
-moz-transform: skew(0deg, 40deg);
-ms-transform: skew(0deg, 40deg);
-o-transform: skew(0deg, 40deg);
transform: skew(0deg, 40deg);
}
.csstransforms .mc_prev_month a:after, .csstransforms .mc_next_month a:after {
content: '';
position: absolute;
top: 7px;
right: 0;
height: 100%;
width: 50%;
background: #FFF;
-webkit-transform: skew(0deg, -40deg);
-moz-transform: skew(0deg, -40deg);
-ms-transform: skew(0deg, -40deg);
-o-transform: skew(0deg, -40deg);
transform: skew(0deg, -40deg);
}
.csstransforms .mc_next_month a:before {
-webkit-transform: skew(0deg, -40deg);
-moz-transform: skew(0deg, -40deg);
-ms-transform: skew(0deg, -40deg);
-o-transform: skew(0deg, -40deg);
transform: skew(0deg, -40deg);
}
.csstransforms .mc_next_month a:after {
-webkit-transform: skew(0deg, 40deg);
-moz-transform: skew(0deg, 40deg);
-ms-transform: skew(0deg, 40deg);
-o-transform: skew(0deg, 40deg);
transform: skew(0deg, 40deg);
}
.mc_days th {
border: 1px solid #eee;
}
#mc-calendar td {
padding: 6px 3px;
color: #333;
background: $color-available;
text-align: center;
border: 1px solid #eee;
}
#mc-calendar td.has_events, #mc-calendar td.last_day.first_day {
background: $color-booked;
}
#mc-calendar td.mc_pad {
background: #EDF0DE;
}
#mc-calendar td.provisional {
background: $color-provisional;
}
/* available / booked (green / red) */
#mc-calendar td.first_day {
background: $color-booked; /* Old browsers */
background: -moz-linear-gradient(-45deg, $color-available 50%, $color-booked 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,$color-available), color-stop(50%,$color-booked)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, $color-available 50%,$color-booked 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, $color-available 50%,$color-booked 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, $color-available 50%,$color-booked 50%); /* IE10+ */
background: linear-gradient(135deg, $color-available 50%,$color-booked 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-available', endColorstr='$color-booked',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/* make borders appear */
.lt-ie10 #mc-calendar td {
position: relative;
z-index: -1;
}
/* booked / available (red / green) */
#mc-calendar td.last_day {
background: $color-booked; /* Old browsers */
background: -moz-linear-gradient(-45deg, $color-booked 50%, $color-available 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,$color-booked), color-stop(50%,$color-available)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, $color-booked 50%,$color-available 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, $color-booked 50%,$color-available 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, $color-booked 50%,$color-available 50%); /* IE10+ */
background: linear-gradient(135deg, $color-booked 50%,$color-available 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-booked', endColorstr='$color-available',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/* available / provisional (green / yellow) */
#mc-calendar td.provisional.first_day {
background: $color-provisional; /* Old browsers */
background: -moz-linear-gradient(-45deg, $color-available 50%, $color-provisional 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,$color-available), color-stop(50%,$color-provisional)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, $color-available 50%,$color-provisional 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, $color-available 50%,$color-provisional 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, $color-available 50%,$color-provisional 50%); /* IE10+ */
background: linear-gradient(135deg, $color-available 50%,$color-provisional 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-available', endColorstr='$color-provisional',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/* provisional / available (yellow / green) */
#mc-calendar td.provisional.last_day {
background: $color-provisional; /* Old browsers */
background: -moz-linear-gradient(-45deg, $color-provisional 50%, $color-available 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,$color-provisional), color-stop(50%,$color-available)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, $color-provisional 50%,$color-available 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, $color-provisional 50%,$color-available 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, $color-provisional 50%,$color-available 50%); /* IE10+ */
background: linear-gradient(135deg, $color-provisional 50%,$color-available 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-provisional', endColorstr='$color-available',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/* provisional / booked (yellow / red) */
#mc-calendar td.provisional.last_day.open.first_day.last_day_provisional {
background: $color-provisional; /* Old browsers */
background: -moz-linear-gradient(-45deg, $color-provisional 50%, $color-booked 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,$color-provisional), color-stop(50%,$color-booked)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, $color-provisional 50%,$color-booked 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, $color-provisional 50%,$color-booked 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, $color-provisional 50%,$color-booked 50%); /* IE10+ */
background: linear-gradient(135deg, $color-provisional 50%,$color-booked 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-provisional', endColorstr='$color-booked',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/* booked / provisional (red / yellow) */
#mc-calendar td.open.last_day.provisional.first_day.first_day_provisional {
background: $color-booked; /* Old browsers */
background: -moz-linear-gradient(-45deg, $color-booked 50%, $color-provisional 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,$color-booked), color-stop(50%,$color-provisional)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, $color-booked 50%,$color-provisional 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, $color-booked 50%,$color-provisional 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, $color-booked 50%,$color-provisional 50%); /* IE10+ */
background: linear-gradient(135deg, $color-booked 50%,$color-provisional 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-booked', endColorstr='$color-provisional',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.middot {
color: #666;
}
.today {
font-weight: bold;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment