Welcome to Jalendar.js Documentation Page.
Jalendar.js is premium jQuery plugin for calendar and events. You can use this plugin for show and add your events.
This calendar has unlimited colors, 3 languages like English, Espånol and Türkçe and two sizes.
You can browse the demo or download this premium plugin on CodeCanyon:
Download This Plugin


You should add these lines in <head> tag:

Just one '.css' file and one '.js' file.


Set your ID and add jalendar class your <div>.


Add .jalendar() function to your ID which you defined before.

Quick View:


More Settings:

You can change some plugin settings. You need to write those codes for this:

(More languages are coming soon, for now, Türkçe, English, Espånol).

If you want to show events you defines before, you should add <div class='added-event'></div> into the <div> which you wanted the events to be shown. Every line add one event. You should add some attribute like data-date, data-time and data-title to this .added-event div.
data-date is shows events day. (Format: Day/Month/Year)
data-time is shows events time. (Format: 20:45 or All Day|Tüm Gün|Todo El Día )
data-title is shows events title.

About Plugin:

You can add event lively when you open adding panel. Events you created will prepend in your .jalendar div as <div class="added-event" data-time="20:00" data-date="23/8/2021" data-title="Lorem ipsum dolor sit amet"></div>.

When you deleted event with using adding panel, <div class="added-event" data-time="20:00" data-date="23/8/2021" data-title="Lorem ipsum dolor sit amet"></div> wherein line deletes in your .jalendar div.

Event divs creates when you open 'adding panel'.


And it has two sizes. If you want little big style, you can add mid class to .jalendar div.

Different Colors and Languages