CSS3 Animated Event Calendar with jQuery – Js Calendar

Js calendar is a stand alone, navigate-able and mobile friendly CSS3 animated event calendar based on jQuery. It creates calendar that allows user to and event to any date that will be highlighted in calendar. User can navigate each month of a year and years to infinite level.

Plugin Overview

Plugin: Js Calendar
Author: Sergii Khudolii
Licence: MIT Licence
Published: January 12, 2024
Repository: Fork on GitHub
Dependencies: jQuery 3.3.1 or Latest version

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 35.3 KB

How to Make CSS3 Animated Event Calendar

1. First of all include the Js Event Calendar CSS file into HTML document.

<link rel="stylesheet" href="css/js-calendar.css">

2. Now, create basic HTML structure for event calendar as follows.

<div style="display: none">
    <div id="dayNode" class="table-cell">
    </div>
    <div id="monthSelectNode" class="select-month" data-month="0"></div>
</div>

<div id="modal" class="modal" style="display: none">
    <div class="dialog">
        <p>Event:</p>
        <form onsubmit="saveEventHandler()">
            <input type="text" id="inputBox">
            <button class="button" type="submit">Save</button>
        </form>
    </div>
</div>

<div id="mainContainer">
    <div id="header" class="cal-header">
        <div id="month-menu">
            <div id="month"></div>
            <div class="month-list">
            </div>
        </div>
        <div id="yearDiv">
            <input type="number" id="year" size="4" onchange="changeYearHandler(this.value)">
        </div>
    </div>

    <div class="calendar-wrapper">
        <div id="left"><</div>
        <div>
            <div id="calendarHeader" class="table">
            </div>
            <div id="calendarBody" class="table">
            </div>
        </div>
        <div id="right">></div>
    </div>
</div>

3. Finally load the jQuery and Animated Event Calendar JavaScript file and done. The plugin will be auto initialized after adding to your website / app.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- Event Calendar Js -->
<script src="js/jquery.js-calendar.js"></script>

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...