October 10, 2019
pbcalendar – Monthly Event Calender Jquery Plugin
Hi friends, Are you want to create event calendar for your website. I am going to tell you a simple lightweight event Calendar with Plugin,
it allows you to create dynamically schedule events for specific dates. You can easily add it to your website. Let’s explain.
Libraries
<!--CSS--> <link rel="stylesheet" type="text/css" href="./pb.calendar.min.css"> <!--JS--> <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>
First of all, Include all jQuery and Moment.js JavaScript libraries and CSS.
JS
<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>
Then, Initialize the Event Calender Jquery Plugin to load an event calendar inside the div container.
HTML
<div id="pb-calendar" class="pb-calendar"></div>
At the last, You create an HTML container where you want to display the event calendar.