<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper">
<div id="calendarContainer"></div>
<div id="organizerContainer" style="margin-left: 8px;"></div>
</div>
<p>This is a more of a schedule type calendar for a website. Thought I'd share it here... So made it a library! ( that's why I didn't add an indicator that there's events in a specific day... If you have any suggestion for that though, let me know; I might end up using it )</p>
<script>
/*
Full tutorial on how to use the Calendar Javascript Library
https://github.com/nizarmah/calendar-javascript-lib/blob/master/README.md
*/
function Calendar(id, size, labelSettings, colors) {
this.id = id;
this.size = size;
this.labelSettings = labelSettings;
this.colors = colors;
months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
label = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
this.months = months;
this.label = [];
this.labels = [];
for (var i = 0; i < 7; i++)
this.label.push(label[(label.indexOf(labelSettings[0]) + this.label.length >= label.length) ? Math.abs(label.length - (label.indexOf(labelSettings[0]) + this.label.length)) : (label.indexOf(labelSettings[0]) + this.label.length)]);
for (var i = 0; i < 7; i++)
this.labels.push(this.label[i].substring(0, (labelSettings[1] > 3) ? 3 : labelSettings[1]));
this.date = new Date();
this.draw();
this.update();
}
Calendar.prototype.constructor = Calendar;
Calendar.prototype.draw = function () {
backSvg = '<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24"><path fill="' + this.colors[3] + '" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"></path></svg>';
nextSvg = '<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24"><path fill="' + this.colors[3] + '" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>';
theCalendar = document.createElement( "DIV");
theCalendar.className = "calendar " + this.size;
document.getElementById(this.id).appendChild(theCalendar);
theContainers = [], theNames = [ 'year', 'month', 'labels', 'days' ];
for (var i = 0; i < theNames.length; i++) {
theContainers[i] = document.createElement( "DIV");
theContainers[i].className = theNames[i];
if (theNames[i] != "days") {
if (theNames[i] != "month") {
theContainers[i].style.backgroundColor = this.colors[1];
theContainers[i].style.color = this.colors[3];
if (theNames[i] != "labels") {
backSlider = document.createElement("DIV");
backSlider.id = this.id + "-year-back";
backSlider.insertAdjacentHTML('beforeend', backSvg);
theContainers[i].appendChild(backSlider);
theText = document.createElement("SPAN");
theText.id = this.id + "-" + theNames[i];
theContainers[i].appendChild(theText);
nextSlider = document.createElement("DIV");
nextSlider.id = this.id + "-year-next";
nextSlider.insertAdjacentHTML('beforeend', nextSvg);
theContainers[i].appendChild(nextSlider);
}
} else {
theContainers[i].style.backgroundColor = this.colors[0];
theContainers[i].style.color = this.colors[2];
backSlider = document.createElement("DIV");
backSlider.id = this.id + "-month-back";
backSlider.insertAdjacentHTML('beforeend', backSvg);
theContainers[i].appendChild(backSlider);
theText = document.createElement("SPAN");
theText.id = this.id + "-" + theNames[i];
theContainers[i].appendChild(theText);
nextSlider = document.createElement("DIV");
nextSlider.id = this.id + "-month-next";
nextSlider.insertAdjacentHTML('beforeend', nextSvg);
theContainers[i].appendChild(nextSlider);
}
}
}
for (var i = 0; i < this.labels.length; i++) {
theLabel = document.createElement("SPAN");
theLabel.id = this.id + "-label-" + (i + 1);
theLabel.appendChild(document.createTextNode(this.labels[i]));
theContainers[2].appendChild(theLabel);
}
theRows = [], theDays = [], theRadios = [];
for (var i = 0; i < 6; i++) {
theRows[i] = document.createElement("DIV");
theRows[i].className = "row";
}
for (var i = 0, j = 0; i < 42; i++) {
theRadios[i] = document.createElement("INPUT");
theRadios[i].className = "day-radios";
theRadios[i].type = "radio";
theRadios[i].name = this.id + "-day-radios";
theRadios[i].id = this.id + "-day-radio-" + (i + 1);
theDays[i] = document.createElement("LABEL");
theDays[i].className = "day";
theDays[i].htmlFor = this.id + "-day-radio-" + (i + 1);
theDays[i].id = this.id + "-day-" + (i + 1);
theText = document.createElement("SPAN");
theText.id = this.id + "-day-num-" + (i + 1);
theDays[i].appendChild(theText);
theRows[j].appendChild(theRadios[i]);
theRows[j].appendChild(theDays[i]);
if ((i + 1) % 7 == 0) {
j++;
}
}
for (var i = 0; i < 6; i++) {
theContainers[3].appendChild(theRows[i]);
}
for (var i = 0; i < theContainers.length; i++) {
theCalendar.appendChild(theContainers[i]);
}
document.getElementById(this.id).appendChild(theCalendar);
}
Calendar.prototype.update = function () {
document.getElementById(this.id + '-year').innerHTML = this.date.getFullYear();
document.getElementById(this.id + '-month').innerHTML = months[this.date.getMonth()];
for (i = 1; i <= 42; i++) {
document.getElementById(this.id + '-day-num-' + i).innerHTML = "";
document.getElementById(this.id + '-day-' + i).className = this.id + " day";
}
firstDay = new Date(this.date.getFullYear(), this.date.getMonth(), 1).getDay();
lastDay = new Date((this.date.getMonth() + 1 > 11) ? this.date.getFullYear() + 1 : this.date.getFullYear(), (this.date.getMonth() + 1 > 12) ? 0 : this.date.getMonth() + 1, 0).getDate();
previousLastDay = new Date((this.date.getMonth() < 0) ? this.date.getFullYear() - 1 : this.date.getFullYear(), (this.date.getMonth() < 0) ? 11 : this.date.getMonth(), 0).getDate();
if (firstDay != 0)
for (i = 0, j = previousLastDay; i < this.label.indexOf(label[firstDay]); i++, j--) {
document.getElementById(this.id + '-day-num-' + (1 + i)).innerHTML = j;
document.getElementById(this.id + '-day-' + (1 + i)).className = this.id + " day diluted";
}
for (i = 1; i <= lastDay; i++) {
document.getElementById(this.id + '-day-num-' + (this.label.indexOf(label[firstDay]) + i)).innerHTML = i;
if (i == this.date.getDate())
document.getElementById(this.id + '-day-radio-' + (this.label.indexOf(label[firstDay]) + i)).checked = true;
}
for (i = lastDay + 1, j = 1; (this.label.indexOf(label[firstDay]) + i) <= 42; i++, j++) {
document.getElementById(this.id + '-day-num-' + (this.label.indexOf(label[firstDay]) + i)).innerHTML = j;
document.getElementById(this.id + '-day-' + (this.label.indexOf(label[firstDay]) + i)).className = this.id + " day diluted";
}
}
function Organizer(id, calendar) {
this.id = id;
this.calendar = calendar;
this.draw();
this.update();
}
Organizer.prototype = {
constructor: Organizer,
back: function (func) {
date = this.calendar.date;
lastDay = new Date((date.getMonth() + 1 > 11) ? date.getFullYear() + 1 : date.getFullYear(), (date.getMonth() + 1 > 12) ? 0 : date.getMonth() + 1, 0).getDate();
previousLastDay = new Date((date.getMonth() < 0) ? date.getFullYear() - 1 : date.getFullYear(), (date.getMonth() < 0) ? 11 : date.getMonth(), 0).getDate();
if (func == "day") {
if (date.getDate() != 1) {
this.changeDateTo(date.getDate() - 1);
} else {
this.back('month');
this.changeDateTo(lastDay);
}
} else {
if (func == "month") {
if (date.getDate() > previousLastDay) {
this.changeDateTo(previousLastDay);
}
if (date.getMonth() != 0)
date.setMonth(date.getMonth() - 1);
else {
date.setMonth(11);
date.setFullYear(date.getFullYear() - 1);
}
} else
date.setFullYear(date.getFullYear() - 1);
}
this.calendar.update();
this.update();
},
next: function (func) {
date = this.calendar.date;
lastDay = new Date((date.getMonth() + 1 > 11) ? date.getFullYear() + 1 : date.getFullYear(), (date.getMonth() + 1 > 12) ? 0 : date.getMonth() + 1, 0).getDate();
soonLastDay = new Date((date.getMonth() + 2 > 11) ? date.getFullYear() + 1 : date.getFullYear(), (date.getMonth() + 2 > 12) ? 0 : date.getMonth() + 2, 0).getDate();
if (func == "day") {
if (date.getDate() != lastDay) {
date.setDate(date.getDate() + 1);
} else {
this.next('month');
date.setDate(1);
}
} else {
if (func == "month") {
if (date.getDate() > soonLastDay) {
this.changeDateTo(soonLastDay);
}
if (date.getMonth() != 11)
date.setMonth(date.getMonth() + 1);
else {
date.setMonth(0);
date.setFullYear(date.getFullYear() + 1);
}
} else
date.setFullYear(date.getFullYear() + 1);
}
this.calendar.update();
this.update();
},
changeDateTo: function (theDay, theBlock) {
if ((theBlock >= 31 && theDay <= 11) || (theBlock <= 6 && theDay >= 8)) {
if (theBlock >= 31 && theDay <= 11)
this.next('month');
else if (theBlock <= 6 && theDay >= 8)
this.back('month');
}
this.calendar.date.setDate(theDay);
this.calendar.update();
this.update();
calendar = this.calendar;
setTimeout(function () { calendar.update(); }, 10);
}
}
Organizer.prototype.draw = function () {
backSvg = '<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24"><path fill="' + this.calendar.colors[3] + '" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"></path></svg>';
nextSvg = '<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24"><path fill="' + this.calendar.colors[3] + '" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>';
theOrganizer = document.createElement( "DIV");
theOrganizer.className = "events " + this.calendar.size;
theDate = document.createElement( "DIV");
theDate.className = "date";
theDate.style.backgroundColor = this.calendar.colors[1];
theDate.style.color = this.calendar.colors[3];
backSlider = document.createElement("DIV");
backSlider.id = this.id + "-day-back";
backSlider.insertAdjacentHTML('beforeend', backSvg);
theDate.appendChild(backSlider);
theText = document.createElement("SPAN");
theText.id = this.id + "-date";
theDate.appendChild(theText);
nextSlider = document.createElement("DIV");
nextSlider.id = this.id + "-day-next";
nextSlider.insertAdjacentHTML('beforeend', nextSvg);
theDate.appendChild(nextSlider);
theRows = document.createElement( "DIV");
theRows.className = "rows";
theList = document.createElement("OL");
theList.className = "list";
theList.id = this.id + "-list";
theRows.appendChild(theList);
theOrganizer.appendChild(theDate);
theOrganizer.appendChild(theRows);
document.getElementById(this.id).appendChild(theOrganizer);
}
Organizer.prototype.update = function () {
document.getElementById(this.id + "-date").innerHTML = this.calendar.months[this.calendar.date.getMonth()] + " " + this.calendar.date.getDate() + ", " + this.calendar.date.getFullYear();
document.getElementById(this.id + "-list").innerHTML = "";
}
Organizer.prototype.list = function (data) {
document.getElementById(this.id + "-list").innerHTML = "";
content = "";
for (var i = 0; i < data.length; i++) {
content += '<li id="' + this.id + '-list-item-' + i + '"><div><span class="' + this.id + ' time" id="' + this.id + '-list-item-' + i + '-time">' + data[i].startTime + ' - ' + data[i].endTime + '</span><span class="' + this.id + ' m" id="' + this.id + '-list-item-' + i + '-m">' + data[i].mTime + '</span></div><p id="' + this.id + '-list-item-' + i + '-text">' + data[i].text + '</p></li>';
}
document.getElementById(this.id + "-list").innerHTML = content;
}
Organizer.prototype.setupBlock = function (blockId, theOrganizer, callback) {
document.getElementById(calendarId + "-day-" + blockId).addEventListener('click', function () {
if (document.getElementById(calendarId + "-day-num-" + blockId).innerHTML.length > 0) {
theOrganizer.changeDateTo(document.getElementById(calendarId + "-day-num-" + blockId).innerHTML, blockId);
callback();
}
});
}
Organizer.prototype.setOnClickListener = function (theCase, backCallback, nextCallback) {
calendarId = this.calendar.id;
organizerId = this.id;
theOrganizer = this;
switch (theCase) {
case "days-blocks":
for (i = 1; i <= 42; i++) {
theOrganizer.setupBlock(i, theOrganizer, backCallback);
}
break;
case "day-slider":
document.getElementById(organizerId + "-day-back").addEventListener('click', function () {
theOrganizer.back('day');
backCallback();
});
document.getElementById(organizerId + "-day-next").addEventListener('click', function () {
theOrganizer.next('day');
nextCallback();
});
break;
case "month-slider":
document.getElementById(calendarId + "-month-back").addEventListener('click', function () {
theOrganizer.back('month');
backCallback();
});
document.getElementById(calendarId + "-month-next").addEventListener('click', function () {
theOrganizer.next('month');
nextCallback();
});
break;
case "year-slider":
document.getElementById(calendarId + "-year-back").addEventListener('click', function () {
theOrganizer.back('year');
backCallback();
});
document.getElementById(calendarId + "-year-next").addEventListener('click', function () {
theOrganizer.next('year');
nextCallback();
});
break;
}
};
// end of library
// full tutorial on how to use it is on GitHub
// https://github.com/nizarmah/Calendar-Javascript-Library/blob/master/README.md
/* end of library; everything is explained below; i'm sorry for the messy code and my bad practices; please criticise me */
var calendar = new Calendar("calendarContainer", "small", [ "Wednesday", 3 ], [ "#e91e63", "#c2185b", "#ffffff", "#f8bbd0" ]);
var organizer = new Organizer("organizerContainer", calendar);
currentDay = calendar.date.getDate(); // used this in order to make anyday today depending on the current today
// my best way of organizing data, maybe that can be the outcome of joining multiple tables in the database and then parsing them in such a manner, easier for the person to push use a date and the events of it
data = {
years: [
{
int: 1999,
months: [
{
int: 4,
days: [
{
int: 28,
events: [
{
startTime: "6:00",
endTime: "6:30",
mTime: "pm",
text: "Weirdo was born"
}
]
}
]
}
]
},
{
int: (new Date().getFullYear()),
months: [
{
int: (new Date().getMonth() + 1),
days: [
{
int: (new Date().getDate()),
events: [
{
startTime: "6:00",
endTime: "7:00",
mTime: "am",
text: "This is scheduled to show today, anyday."
},
{
startTime: "5:45",
endTime: "7:15",
mTime: "pm",
text: "WIP Library"
},
{
startTime: "10:00",
endTime: "11:00",
mTime: "pm",
text: "Probably won't fix that (time width)"
},
{
startTime: "8:00",
endTime: "9:00",
mTime: "pm",
text: "Next spam is for demonstration purposes only"
},
{
startTime: "5:45",
endTime: "7:15",
mTime: "pm",
text: "WIP Library"
},
{
startTime: "10:00",
endTime: "11:00",
mTime: "pm",
text: "Probably won't fix that (time width)"
},
{
startTime: "5:45",
endTime: "7:15",
mTime: "pm",
text: "WIP Library"
},
{
startTime: "10:00",
endTime: "11:00",
mTime: "pm",
text: "Probably won't fix that (time width)"
},
{
startTime: "5:45",
endTime: "7:15",
mTime: "pm",
text: "WIP Library"
},
{
startTime: "10:00",
endTime: "11:00",
mTime: "pm",
text: "Probably won't fix that (time width)"
},
{
startTime: "5:45",
endTime: "7:15",
mTime: "pm",
text: "WIP Library"
},
{
startTime: "10:00",
endTime: "11:00",
mTime: "pm",
text: "Probably won't fix that (time width)"
},
{
startTime: "5:45",
endTime: "7:15",
mTime: "pm",
text: "WIP Library"
},
{
startTime: "10:00",
endTime: "11:00",
mTime: "pm",
text: "Probably won't fix that (time width)"
}
]
}
]
}
]
}
]
};
function showEvents() {
theYear = -1, theMonth = -1, theDay = -1;
for (i = 0; i < data.years.length; i++) {
if (calendar.date.getFullYear() == data.years[i].int) {
theYear = i;
break;
}
}
if (theYear == -1) return;
for (i = 0; i < data.years[theYear].months.length; i++) {
if ((calendar.date.getMonth() + 1) == data.years[theYear].months[i].int) {
theMonth = i;
break;
}
}
if (theMonth == -1) return;
for (i = 0; i < data.years[theYear].months[theMonth].days.length; i++) {
if (calendar.date.getDate() == data.years[theYear].months[theMonth].days[i].int) {
theDay = i;
break;
}
}
if (theDay == -1) return;
theEvents = data.years[theYear].months[theMonth].days[theDay].events;
organizer.list(theEvents); // what's responsible for listing
}
showEvents();
organizer.setOnClickListener('day-slider', function () { showEvents(); console.log("Day back slider clicked"); }, function () { showEvents(); console.log("Day next slider clicked"); });
organizer.setOnClickListener('days-blocks', function () { showEvents(); console.log("Day block clicked"); }, null);
organizer.setOnClickListener('month-slider', function () { showEvents(); console.log("Month back slider clicked"); }, function () { showEvents(); console.log("Month next slider clicked"); });
organizer.setOnClickListener('year-slider', function () { showEvents(); console.log("Year back slider clicked"); }, function () { showEvents(); console.log("Year next slider clicked"); });
</script>
body
{
display: felx;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.wrapper
{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
body > p
{
font-family: "Satellite", "Roboto", sans-serif;
font-size: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center; align-items: center; margin: 20px 40px; text-align: justify; }
.calendar
{
width: 700px; height: 800px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-family: "Satellite", "Roboto", sans-serif; border: 1px solid rgba(21, 21, 21, 0.12); -webkit-transform: scale(1); transform: scale(1); box-shadow: 0px 0px 4px rgba(21, 21, 21, 0.21); -ms-user-select: none; user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } .calendar.small { width: 400px; height: 400px; } .calendar.medium { width: 600px; height: 600px; } .calendar.large { width: 800px; height: 800px; } .year { width: calc(100% - 10px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 5px; font-size: 14px; } .year > span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; } .year > div { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } .month { width: calc(100% - 10px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 20px 5px; font-size: 40px; box-shadow: 0px 2px 6px rgba(21, 21, 21, 0.21); } .month > span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; } .month > div { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } .labels { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .labels > span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 12px; text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px; } .days { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; box-shadow: 0px 2px 6px -2px rgba(21, 21, 21, 0.21); } .row { width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .day { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; border-bottom: 1px solid rgba(21, 21, 21, .12); border-right: 1px solid rgba(21, 21, 21, .12); cursor: pointer; -webkit-transition: box-shadow 200ms ease-in-out; transition: box-shadow 200ms ease-in-out; } .day:last-child { border-right: none; } .day:hover { background-color: rgba(21, 21, 21, 0.012); box-shadow: inset 0px 0px 4px rgba(21, 21, 21, 0.21); } .day-radios { display: none; } .day-radios:checked + .day { background-color: rgba(21, 21, 21, 0.012); box-shadow: inset 0px 0px 4px rgba(21, 21, 21, 0.21); } .day > span { width: auto; font-size: 14px; color: rgba(21, 21, 21, 0.84); } .day.diluted { background-color: rgba(21, 21, 21, 0.021); box-shadow: inset 0px 0px 1px rgba(21, 21, 21, 0.12); } .day.diluted > span { width: auto; font-size: 10px; color: rgba(21, 21, 21, 0.73); } .events { width: 800px; height: 800px; font-family: "Satellite", "Roboto", sans-serif; box-shadow: 0px 0px 4px rgba(21, 21, 21, 0.21); border: 1px solid rgba(21, 21, 21, 0.12); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-user-select: none; user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } .events.small { width: 400px; height: 400px; } .events.medium { width: 600px; height: 600px; } .events.large { width: 800px; height: 800px; } .date { width: calc(100% - 10px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; background-color: ' + this.calendar.colors[1] + '; color: ' + this.calendar.colors[3] + '; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 5px; font-size: 14px; } .date > span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; } .date > div { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; } .rows { width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden !important; } .list { width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto !important; padding: 0; margin: 0; color: rgba(21, 21, 21, 0.94); } .list > li { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; border-bottom: 1px solid rgba(21, 21, 21, 0.12); } .list > li:hover { box-shadow: inset 0px 0px 4px rgba(21, 21, 21, 0.21); } .list > li > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 2; -ms-flex: 2; flex: 2; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; padding: 10px; border-right: 1px solid rgba(21, 21, 21, 0.12); } .time { font-size: 14px; } .m { font-size: 14px; text-transform: uppercase; padding-left: 5px; } .list > li > p { -webkit-box-flex: 4; -ms-flex: 4; flex: 4; margin: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; font-size: 18px; word-wrap: break-word; word-break: break-word; }
