Customize the event calendar for holiday, halfday and fullday

Event calendar is a way to show multiple, overlapping events across calendar days and rows. This is an interface to add events, edit events, & destroy event.

I just cramped while implemented the halfday and fullday functionality in event caledar. I think it will help you.

Generate the JSON for the holiday, event day count and event status(half or full)

below are the snippets of code of controller

def index
	if request.xhr?
		@events = Event.order("created_at desc")
		events = []  
		holiday = []
	   @holiday = HolidayList.all
		@events.each do |event|
		  events << {:id => event.id, :title => event.user.name + "   ( " + event.event_type.option + " )     "  ,:day_count => (event.days/0.5).to_s , :half=> ((event.days % 1) != 0) ? 1 : 0, :tip => "Type:" + event.event_type.option + " Resson:" +  event.reason || "",  :color=> event.event_type.color, :className=>"test",:description => event.reason || "Some cool description here...", :start => "#{event.from_date.iso8601}", :end => "#{event.to_date.iso8601}"}
		end
		@holiday.each do |hol|
		  events << {:id => hol.id, :title => hol.name + "   ( HOLIDAY )", :day_count => 1 ,:tip => "Type:Holiday  Resson:" +  hol.name || "", :half=> 0, :color=> "#B6B6B6", :className=>"holi_day",:description => hol.description || "Some cool description here...", :start => "#{hol.h_date.iso8601}", :end => "#{hol.h_date.iso8601}"}
		end
		 events
	else
	  params[:for_year]=Time.now.strftime("%Y") unless params[:for_year]
		events = Event.where("YEAR(from_date)=?",params[:for_year]).order("created_at desc")
	end
    respond_to do |format|
      format.html 
	   format.xml  { render :xml => events }
      format.json { render json: events}
    end
  end

it will return the json data as below

[
	{
	created_at: "2013-10-24T06:32:50Z",
	days: 1,
	from_date: "2013-10-26T00:00:00Z",
	id: 6,
	event_type_id: 3,
	reason: "Event",
	to_date: "2013-10-26T00:00:00Z",
	updated_at: "2013-10-24T06:32:50Z",
	user_id: 11
	},
   {
	created_at: "2013-10-24T06:32:14Z",
	days: 1.5,
	from_date: "2013-10-28T00:00:00Z",
	id: 5,
	event_type_id: 13,
	reason: "new Event",
	to_date: "2013-10-29T00:00:00Z",
	updated_at: "2013-10-24T06:32:14Z",
	user_id: 9
	},
	{
	created_at: "2013-10-24T06:30:31Z",
	days: 0.5,
	from_date: "2013-10-25T00:00:00Z",
	id: 4,
	event_type_id: 13,
	reason: "personal work",
	to_date: "2013-10-25T00:00:00Z",
	updated_at: "2013-10-24T06:30:31Z",
	user_id: 8
	}
]

Change the “eventAfterRender” method in jquery

$(document).ready(function() {
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();

		$('#calendar').fullCalendar({ 
		        height: 350,
		        color: '#ff0000',
				textColor: '#ffffff',
				backgroundColor: 'red',
				firstDay: 1,
		        theme: true,
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			disableDragging: true,
			editable: true,
			eventSources: [{
			url: '/yourdata',					
			color: '#ff0000',
			textColor: '#ffffff',
			backgroundColor: '#ccc',
			border:'1px solid #7BD148',
			ignoreTimezone: false
		   }],
        eventRender: function(event, element, date ) {
            element.attr('title', event.tip); // for tooltip
        },
        eventAfterRender: function(event, element, view) {
		       if (event.half == "1") {
		        // half a day
		        var elementWidth = parseInt(90 * event.day_count);

		        // set width of element
		        jQuery(element).css('width', elementWidth + "px");
		       }
		        if (event.className == "holi_day") {
                $(element).find(".fc-event-title").css({"color": "#0000dd", "font-weight": "bold"  });
               }
        }
	  });
	});

Now the event calendar show the holidy, halfday and fullday as below

event calendar

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s