Monthly Event Calendar Jquery Plugin – pbcalendar

by Posted on

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.

Monthly Event Calender Jquery Plugin



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.

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

HTML

Create a container where you want to render the monthly event calendar.

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



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.

DEMO | DOWNLOAD

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.


Published by admin