A calendar plugin based on jquery with event logging

We've also shared a lot of jquery calendar plugins before, some of which have CSS3 features that are especially beautiful to look at. Today to share the jquery calendar plugin not only has a beautiful appearance, and with the date event recording function, click the date to expand the Event record window, you can set the description of the event and the time of the reminder, is a relatively useful jquery calendar plugin.

Online preview Source Download

Let's take a look at the implementation process and source code of the calendar plug-in that implements this jquery with event logging, which consists mainly of HTML, CSS, and jquery.

HTML code:

<DivID= "MyId"class= "Jalendar">        <Divclass= "Added-event"data-date= "14/12/2017"Data-time= "Tüm gün"Data-title= "WWDC on San Francisco, LA"></Div>        <Divclass= "Added-event"data-date= "16/12/2017"Data-time= "20:45"Data-title= "Tarkan? Stanbul Concert on Harbiye A?? K Hava Tiyatrosu "></Div>        <Divclass= "Added-event"data-date= "17/12/2017"Data-time= "21:00"Data-title= "CodeCanyon stanbul meeting on Starbucks, kad?k?y"></Div>        <Divclass= "Added-event"data-date= "17/12/2017"Data-time= "22:00"Data-title= "Front-End Design and Javascript conferance on Hali?" Kongre Merkezi "></Div>        <Divclass= "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/dayColor: ' #ed145a ',//Unlimited ColorsLang: ' EN '//format:english-' EN ', türk?e-' TR '    });});

via:http://www.w2bc.com/article/12683

Moe's IT People

A calendar plugin based on jquery with event logging