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.


<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>


First of all, Include all jQuery and Moment.js JavaScript libraries and CSS.


<script type="text/javascript">
  var current_yyyymm_ = moment().format("YYYYMM");
    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"},
    schedule_dot_item_render : function(dot_item_el_, schedule_data_){
      dot_item_el_.addClass(schedule_data_['style'], true);
      return dot_item_el_;

Then, Initialize the Event Calender Jquery Plugin to load an event calendar inside the div container.


<div id="pb-calendar" class="pb-calendar"></div>

At the last, You create an HTML container where you want to display the event calendar.

Add a Comment