Example 1: html calendar
<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing: border-box;}
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
text-align: center;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
@media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}
}
@media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}
}
@media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}
</style>
</head>
<body>
<h1>CSS Calendar</h1>
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li>
August<br>
<span style="font-size:18px">2021</span>
</li>
</ul>
</div>
<ul class="weekdays">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</body>
</html>
Example 2: how to create an event calendar in javascript
mobiscroll.settings = {
lang: ''
theme: 'ios',
themeVariant: 'light'
};
var monthInst,
dayInst,
popupInst,
dateInst,
preventSet,
allDaySwitch = document.getElementById('allDay'),
eventTextInput = document.getElementById('eventText'),
eventDescInput = document.getElementById('eventDesc'),
now = new Date(),
btn = '<button class="mbsc-btn mbsc-btn-outline mbsc-btn-danger md-delete-btn mbsc-ios">Delete</button>',
myData = [{
start: new Date(now.getFullYear(), now.getMonth(), 8, 13),
end: new Date(now.getFullYear(), now.getMonth(), 8, 13, 30),
text: 'Lunch @ Butcher\'s' + btn,
color: '#26c57d'
}, {
start: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 15),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 16),
text: 'General orientation' + btn,
color: '#fd966a'
}, {
start: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 18),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 22),
text: 'Dexter BD' + btn,
color: '#37bbe4'
}, {
start: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 10, 30),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 11, 30),
text: 'Stakeholder mtg.' + btn,
color: '#d00f0f'
}];
function navigate(inst, val) {
if (inst) {
inst.navigate(val);
}
}
dateInst = mobiscroll.range('#eventDate', {
controls: ['date', 'time'],
dateWheels: '|D M d|',
endInput: '#endInput',
tabs: false,
responsive: {
large: {
touchUi: false
}
},
cssClass: 'md-add-event-range'
});
dayInst = mobiscroll.eventcalendar('#demo-add-event-day', {
display: 'inline',
view: {
eventList: { type: 'day' }
},
data: myData,
onPageChange: function (event, inst) {
var day = event.firstDay;
preventSet = true;
navigate(monthInst, day);
dateInst.setVal([day, new Date(day.getFullYear(), day.getMonth(), day.getDate(), day.getHours() + 2)], true);
},
onEventSelect: function (event, inst) {
if (event.domEvent.target.classList.contains('md-delete-btn')) {
mobiscroll.confirm({
title: 'Confirm Deletion',
message: 'Are you sure you want to delete this item?',
okText: 'Delete',
callback: function (res) {
if (res) {
inst.removeEvent([event.event._id]);
monthInst.removeEvent([event.event._id]);
mobiscroll.toast({
message: 'Deleted'
});
}
}
});
}
}
});
monthInst = mobiscroll.eventcalendar('#demo-add-event-month', {
display: 'inline',
view: {
calendar: { type: 'month' }
},
data: myData,
onSetDate: function (event, inst) {
if (!preventSet) {
var day = event.date;
navigate(dayInst, day);
dateInst.setVal([day, new Date(day.getFullYear(), day.getMonth(), day.getDate(), day.getHours() + 2)], true);
}
preventSet = false;
}
});
document
.getElementById('allDay')
.addEventListener('change', function () {
var allDay = this.checked;
dateInst.option({
controls: allDay ? ['date'] : ['date', 'time'],
dateWheels: (allDay ? 'MM dd yy' : '|D M d|')
});
});
popupInst = mobiscroll.popup('#demo-add-event-popup', {
display: 'center',
cssClass: 'mbsc-no-padding',
buttons: [{
text: 'Add event',
handler: 'set'
},
'cancel'
],
headerText: 'Add new event',
onSet: function (event, inst) {
var eventDates = dateInst.getVal(),
events = {
start: eventDates[0],
end: eventDates[1],
text: (eventTextInput.value || 'New Event') + btn,
title: eventTextInput.value || 'New Event',
description: eventDescInput.value,
allDay: allDaySwitch.checked,
free: document.querySelector('input[name="free"]:checked').value == 'true'
};
monthInst.addEvent(events);
dayInst.addEvent(events);
eventTextInput.value = '';
eventDescInput.value = '';
// Navigate the calendar to the new event's start date
monthInst.navigate(eventDates[0], true);
}
});
document
.getElementById('showAddEventPopup')
.addEventListener('click', function () {
popupInst.show();
}, false);