Example 1: dynamic calendar in javascript with example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.calendarMonth{
border-collapse:collapse;
background-color:#eef;
}
.calendarMonth th{
}
.calendarMonth .calendarTitle{
background-color:#ddf;
}
.calendarMonth .calendarPrevious{
background-color:#ddf;
}
.calendarMonth .calendarNext{
background-color:#ddf;
}
.calendarEmpty{
}
.calendarDay{
background:#fff;
border:1px solid black;
text-align:center;
width:2em;
}
</style>
<script type="text/javascript">
var daysInMonth=[31,28,31,30,31,30,31,31,30,31,30,31];
var monthNames=['January','February','March','April','May','June','July','August','September','October','November','December'];
function getDaysInMonth(month,year){
if ((month==1)&&(year%4==0)&&((year%100!=0)||(year%400==0))){
return 29;
}else{
return daysInMonth[month];
}
}
function dateClicked(day,month,year){
document.forms.calendar.date.value = day+'/'+month+'/'+year;
}
function setDisplayedMonth(month){
if (month<0){
alert('You have reached the beginning of this calendar');
}else if (month>=months){
alert('You have reached the end of this calendar');
}else{
for (var i=0;i<months;i++){
document.getElementById('calendarMonth'+i).style.display='none';
}
document.getElementById('calendarMonth'+month).style.display='block';
}
}
</script>
</head>
<body>
<form id="calendar">
<table>
<tr>
<td><label for="date">Date:</label></td>
<td><input type="text" id="date" name="date" value="28/05/2015"></td>
</tr>
<tr><td></td><td>
<script type="text/javascript">
var month=0;
var year=2015;
var months=12;
for (var i=0;i<months;i++){
document.writeln('<table class="calendarMonth" '+'id="calendarMonth'+i+'" cellspacing="0">');
document.writeln('<tr>'
+'<th class="calendarPrevious" onClick="setDisplayedMonth('+(i-1)+')"><</th>'+'<th class="calendarTitle" colspan="5">' +monthNames[month]+' '+year+'</th>'+'<th class="calendarNext" onClick="setDisplayedMonth('+(i+1)+')">></th>'+'</tr>');
document.writeln('<tr><th>Sun</th><th>Mon</th><th>Tue</th>'+'<th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>');
var firstDayDate=new Date(year,month,1);
var firstDay=firstDayDate.getDay();
for (j=0;j<42;j++){
if (j%7==0) document.write('<tr>')
if ((j=firstDay+getDaysInMonth(month,year))){
document.write('<td class="calendarEmpty"></td>');
}else{
document.write('<td class="calendarDay" '+'onClick="dateClicked('+(j-firstDay+1)+','+(month+1)+','+year+')">'+(j-firstDay+1)+'');
}
if (j%7==6) document.write('</tr>');
}
document.writeln('</table>');
month++;
if (month>=12){
month=0;
year++;
}
}
setDisplayedMonth(5);
</script>
</td></tr>
</table>
</form>
</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);