This JavaScript code snippet helps you to create an event calendar. The purpose of this code is to generate an event calendar using the Flatpicker library. The code sets up a calendar with selectable dates and populates it with events that occur on specific dates.
The events are defined in the eventDates object, which maps date strings to arrays of event descriptions. The calendar is displayed inline on the webpage, and its appearance is adjusted based on the width of the viewport. The formatDate function is used to format dates in a specific format and is called to generate the date strings used in eventDates.
How to Create JavaScript Event Calendar
First of all, load the following assets into the head tag of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900" rel="stylesheet"> <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css'>
Create the HTML structure as follows for the event calendar:
<div class="cal-modal-container">
<div class="cal-modal">
<h3>UPCOMING EVENTS</h3>
<div id="calendar">
<div class="placeholder"></div>
<div class="calendar-events">
</div>
</div>
</div>
</div>
Style the event calendar using the following CSS styles:
* {
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
font-weight: 500;
}
body {
padding: 0;
margin: 0;
}
.cal-modal-container {
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.cal-modal {
background: #1D252C;
color: #fff;
padding: 40px 60px;
text-align: center;
}
.cal-modal h3 {
font-size: 37px;
font-weight: 900;
margin: 0 0 1rem;
}
#calendar {
display: inline-block;
}
#calendar .placeholder {
display: none;
width: 300px;
}
#calendar .flatpickr-calendar {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
color: #fff;
top: 0;
}
#calendar .flatpickr-calendar .flatpickr-innerContainer {
overflow: visible;
}
#calendar .flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays {
overflow: visible;
}
#calendar .flatpickr-calendar .flatpickr-months .flatpickr-month {
color: inherit;
margin-bottom: 10px;
}
#calendar .flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month {
font-size: 16px;
}
#calendar .flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .numInputWrapper {
display: none;
}
#calendar .flatpickr-calendar .flatpickr-months .flatpickr-prev-month, #calendar .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
top: calc(50% - 23px);
}
#calendar .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg, #calendar .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
height: 46px;
width: 46px;
}
#calendar .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg path, #calendar .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg path {
fill: #3DAE2B;
}
#calendar .flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
left: -60px;
}
#calendar .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
right: -60px;
}
#calendar .flatpickr-calendar .flatpickr-weekdays .flatpickr-weekdaycontainer {
max-width: 307.875px;
padding: 0 10px;
position: relative;
}
#calendar .flatpickr-calendar .flatpickr-weekdays .flatpickr-weekdaycontainer::after {
content: "";
background: #343F48;
position: absolute;
top: -32px;
bottom: -230px;
right: 0;
width: 1px;
}
#calendar .flatpickr-calendar .flatpickr-weekdays .flatpickr-weekdaycontainer:last-child::after {
content: none;
}
#calendar .flatpickr-calendar .flatpickr-weekdays .flatpickr-weekdaycontainer .flatpickr-weekday {
color: #fff;
font-weight: 700;
}
#calendar .flatpickr-calendar .dayContainer {
box-shadow: none;
padding: 0 10px;
position: static;
}
#calendar .flatpickr-calendar .dayContainer:last-child::after {
content: none;
}
#calendar .flatpickr-calendar .flatpickr-day {
background: #fff;
border: 0;
color: #1D252C;
font-weight: 500;
transition: color 0.1s, background 0.1s;
}
#calendar .flatpickr-calendar .flatpickr-day:hover {
background: #3DAE2B;
color: #fff;
}
#calendar .flatpickr-calendar .flatpickr-day.flatpickr-disabled, #calendar .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
background: none;
color: #fff;
cursor: default;
}
#calendar .flatpickr-calendar .flatpickr-day.selected:not(.hidden), #calendar .flatpickr-calendar .flatpickr-day.selected:not(.hidden):hover, #calendar .flatpickr-calendar .flatpickr-day.selected:not(.hidden):focus {
background: #37A628;
color: #fff;
}
#calendar .flatpickr-calendar .flatpickr-day.nextMonthDay, #calendar .flatpickr-calendar .flatpickr-day.prevMonthDay {
background: none;
color: rgba(207, 210, 211, 0.1) !important;
cursor: default;
visibility: visible;
}
#calendar .calendar-events {
display: block;
justify-content: space-around;
margin-top: 30px;
min-height: 36px;
}
@media screen and (min-width: 992px) {
#calendar .calendar-events {
display: flex;
justify-content: space-around;
}
}
#calendar .calendar-events .event {
font-size: 29px;
}
#calendar .calendar-events .event .date {
color: #fff;
font-weight: 600;
}
#calendar .calendar-events .event .location {
color: #3DAE2B;
font-weight: 800;
letter-spacing: -0.8px;
}
Load the following scripts before closing the body tag:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/flatpickr'></script>
Finally, add the following JavaScript function for its functionality:
// generate events
var eventDates = {}
let day3 = formatDate(new Date(new Date().setDate(new Date().getDate() + 0)))
eventDates[day3] = [
'Annual Training Camp-II has been conducted in the campus',
]
let day2 = formatDate(new Date(new Date().setDate(new Date().getDate() + 10)))
eventDates[day2] = [
'End of Annual Training Camp-II',
]
// set maxDates
var maxDate = {
1: new Date(new Date().setMonth(new Date().getMonth() + 11)),
2: new Date(new Date().setMonth(new Date().getMonth() + 10)),
3: new Date(new Date().setMonth(new Date().getMonth() + 9))
}
var flatpickr = $('#calendar .placeholder').flatpickr({
inline: true,
minDate: 'today',
maxDate: maxDate[3]
,
showMonths: 1,
enable: Object.keys(eventDates),
disableMobile: "true",
onChange: function(date, str, inst) {
var contents = '';
if(date.length) {
for(i=0; i < eventDates[str].length; i++) {
contents += '<div class="event"><div class="date">' + flatpickr.formatDate(date[0], 'l J F') + '</div><div class="location">' + eventDates[str][i] + '</div></div>';
}
}
$('#calendar .calendar-events').html(contents)
},
locale: {
weekdays: {
shorthand: ["S", "M", "T", "W", "T", "F", "S"],
longhand: [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
]
}
}
})
eventCaledarResize($(window));
$(window).on('resize', function() {
eventCaledarResize($(this))
})
function eventCaledarResize($el) {
var width = $el.width()
if(flatpickr.selectedDates.length) {
flatpickr.clear()
}
if(width >= 992 && flatpickr.config.showMonths !== 3) {
flatpickr.set('showMonths', 3)
flatpickr.set('maxDate', maxDate[3])
}
if(width < 992 && width >= 768 && flatpickr.config.showMonths !== 2) {
flatpickr.set('showMonths', 2)
flatpickr.set('maxDate', maxDate[2])
}
if(width < 768 && flatpickr.config.showMonths !== 1) {
flatpickr.set('showMonths', 1)
flatpickr.set('maxDate', maxDate[1])
$('.flatpickr-calendar').css('width', '')
}
}
function formatDate(date) {
let d = date.getDate();
let m = date.getMonth() + 1; //Month from 0 to 11
let y = date.getFullYear();
return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
}
That’s all! hopefully, you have successfully created JavaScript Event Calendar. If you have any questions or suggestions, feel free to comment below.
