Simple Calendar is a really simple calendar using HTML, CSS, and JQuery that enables the user to switch between months using the Previous / Next buttons.
jquery calendar week view, best jquery calendar plugin with events, responsive event calendar jquery, jquery datepicker, jquery calendar plugin, fullcalendar jquery example
How to make use of it:
1. Build the HTML structure for the calendar.
<section id="myCalendar"> <div class="hbContainer"> <div class="calendarYearMonth center"> <p class="left calBtn" onclick="prevMonth()"> Prev </p> <p id="yearMonth"> Jan 2021 </p> <p class="right calBtn" onclick="nextMonth()"> Next </p> </div> <div> <ol class="calendarList1"> <li class="day-name">Sat</li> <li class="day-name">Sun</li> <li class="day-name">Mon</li> <li class="day-name">Tue</li> <li class="day-name">Wed</li> <li class="day-name">Thu</li> <li class="day-name">Fri</li> </ol> <ol class="calendarList2" id="calendarList"> </ol> </div> </div> </section>
2. The mandatory CSS styles for the calendar UI.
.hbContainer { max-width: 400px; margin: auto; } .left { float: left; } .right { float: right; } .center { text-align: center; } .calendarList1 { list-style: none; width: 100%; margin: 0; padding: 0; text-align: center; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(1, 40px); align-items: center; justify-items: center; grid-gap: 8px; font-size: 14px; color: #707070; } .calendarList2 { list-style: none; margin: 0; padding: 0; text-align: center; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 40px); align-items: center; justify-items: center; grid-gap: 8px; font-size: 14px; color: #707070; } .calendarYearMonth { margin-top: 24px; } .calendarYearMonth p { display: inline-block; vertical-align: middle; } .calBtn { user-select: none; cursor: pointer; background: white; margin: 8px 0; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 22px; color: #707070; border: 1px solid #eaeaea; }
3. Load the principle JavaScript calendar.js
after jQuery and executed.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/js/calendar.js"></script>
Minimalist Navigatable Calendar, Simple Calendar Plugin/Github, jquery calendar with events, jquery calendar codepen
See Demo And Download
Official Website(SalehBUD): Click Here
This superior jQuery/javascript plugin is developed by SalehBUD. For extra advanced usage, please go to the official website.
Be First to Comment