A jQuery calendar plug-in based on jquery with event records

A jQuery calendar plug-in based on jquery with event records

We have also shared a lot of jQuery calendar plug-ins before. Some of them use the CSS3 features and have a very nice appearance. The jQuery calendar plug-in that you want to share today not only has a brilliant appearance, but also has a date event recording function. Click date to expand the Event Recording window, you can set the Event Description and reminder time. It is a relatively practical jQuery calendar plug-in.

Download Online Preview source code

Next, let's take a look at the implementation process and source code of this jQuery calendar plug-in with the event recording function. The Code mainly consists of HTML, CSS, and jQuery.

HTML code:

<div id="myId" class="jalendar">        <div class="added-event" data-date="14/12/2017" data-time="Tüm Gün" data-title="WWDC 13 on San Francisco, LA"></div>        <div class="added-event" data-date="16/12/2017" data-time="20:45" data-title="Tarkan İstanbul Concert on Harbiye Açık Hava Tiyatrosu"></div>        <div class="added-event" data-date="17/12/2017" data-time="21:00" data-title="CodeCanyon İstanbul Meeting on Starbucks, Kadıköy"></div>        <div class="added-event" data-date="17/12/2017" data-time="22:00" data-title="Front-End Design and Javascript Conferance on Haliç Kongre Merkezi"></div>        <div class="added-event" data-date="17/12/2017" data-time="22:00" data-title="Lorem ipsum dolor sit amet"></div>    </div>

CSS code:

.jalendar {    position: relative;    width: 300px;    margin: 30px auto;}.jalendar .left {    float: left;}.jalendar .clear {    clear: both;}.jalendar.mid {    width: 420px;}.jalendar .added-event {    display: none;}.jalendar-wood {    position: relative;    background: url('../images/jalendar-wood-bg.png') left top;    border-radius: 10px;    box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), inset 0 -2px 10px rgba(255,255,255,0.3);    padding: 15px;    border-bottom: 1px solid rgba(255,255,255,0.2);    border-top: 1px solid #e1bf89;    border-right: 1px solid #b4925d;    border-left: 1px solid #b4925d;    display: inline-block;    z-index: 2;}

JQuery code:

$(function () {    $('#myId').jalendar({        customDay: '2017/12/01',  // Format: Year/Month/Day        color: '#ed145a', // Unlimited Colors        lang: 'EN' // Format: English — 'EN', Türkçe — 'TR'    });});

Via: http://www.w2bc.com/Article/12683