Minimal Monthly Event Calendar Plugin For jQuery - pbcalendar

pbcalendar is a minimal jQuery plugin that lets you render a monthly calendar on the webpage and allows you to dynamically schedule events on specific dates.

The plugin is freely distributable under the terms of the MIT license.

How to use it:

1. Load the necessary jQuery and Moment.js JavaScript libraries at the end of the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js" 
        integrity="sha384-F13mJAeqdsVJS5kJv7MZ4PzYmJ+yXXZkt/gEnamJGTXZFzYgAcVtNg5wBDrRgLg9" 
        crossorigin="anonymous">
</script>

2. Load the jQuery pbcalendar plugin's files in the document.

<link rel="stylesheet" href="pb.calendar.css">
<script src="pb.calendar.js"></script>

3. Create a container where you want to render the calendar.

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

4. Initialize the plugin to render a default calendar inside the container element.

$("#pb-calendar").pb_calendar();

5. Config the calendar with the following settings.

$("#pb-calendar").pb_calendar({

  // is date selectable?
  'day_selectable' : false,

  // callbacks
  'callback_selected_day' : $.noop,
  'callback_changed_month' : $.noop,

  // min/max dates
  'min_yyyymm' : null,
  'max_yyyymm' : null,

  // navigation arrows
  'next_month_button' : '<img src="./img/arrow-next.png" class="icon">',
  'prev_month_button' : '<img src="./img/arrow-prev.png" class="icon">',

  // custom label format
  'month_label_format' : "MMM",
  'year_label_format' : "YYYY"
  
});

5. An example shows how to schedule your own events on the calendar.

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_;
  }
});

---

This awesome jQuery plugin is developed by pnbro. For more Advanced Usages, please check the demo page or visit the official website.