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
Advertisements