javascript calendar code example

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
}

/* Add media queries for smaller screens */
@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">&#10094;</li>
    <li class="next">&#10095;</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);