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.