Monthly Event Calendar Plugin – pbcalendar: Do you want to create and add monthly event calendar on your website? If yes then In this post I am going to share simple lightweight Monthly event Calendar Plugin which allows you to dynamically schedule events on specific dates.
Integrate Monthly Event Calendar Jquery Plugin
Libraries
Include all necessary jQuery and Moment.js JavaScript libraries + CSS on page where you want to add monthly event calendar.
<link rel="stylesheet" type="text/css" href="./pb.calendar.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js">script> <script type="text/javascript" src="./pb.calendar.min.js">script> |
HTML
Create a container where you want to render the monthly event calendar.
|
JS
Initialize the plugin to load a monthly event calendar inside the div container.
<script type="text/javascript"> jQuery(document).ready(function(){ var current_yyyymm_ = moment().format("YYYYMM"); $("#pb-calendar").pb_calendar({ schedule_list : function(callback_, yyyymm_){ var temp_schedule_list_ = {}; temp_schedule_list_[current_yyyymm_+"03"] = [ {'ID' : 1, style : "red"} ]; temp_schedule_list_[current_yyyymm_+"10"] = [ {'ID' : 2, style : "red"}, {'ID' : 3, style : "blue"}, ]; temp_schedule_list_[current_yyyymm_+"20"] = [ {'ID' : 4, style : "red"}, {'ID' : 5, style : "blue"}, {'ID' : 6, style : "green"}, ]; callback_(temp_schedule_list_); }, schedule_dot_item_render : function(dot_item_el_, schedule_data_){ dot_item_el_.addClass(schedule_data_['style'], true); return dot_item_el_; } }); }); script> |
See live demo and download source code.
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
