Question

Is it possible to minimalize the data shown on a given day (w/event) in the calendar? I know this seems like a weird request. Specifically I want to remove the title and start time… Essentially if I could just have a css class for days with events, or I am fine with the current “bubble” it shows now just with out the extra info. http://www.seattledesigndistrict.com/events/ is the calendar I am working with right now. It’s pulling data from a wordpress custom post type:

<script type="text/javascript">
$(document).ready(function(){
$('#calendar').fullCalendar({
    header: {
        left: 'prev,next ',
        center: 'title',
        right: ''
    },

    weekMode: 'liquid',
    height: 250,
    events: [
        <?php
            $myEvents = get_posts('post_type=event&orderby=title&order=ASC&numberposts=-1');
            $eventString = '';
            foreach($myEvents as $event){
                $eventString .= '{ title: \''.$event->post_title.'\',';
                $eventDate = get_post_meta($event->ID,'event_date',true);
                $dateParts = explode('-',$eventDate);
                $startTime = get_post_meta($event->ID,'starttime',true);
                if($startTime != ''){
                    $startTimeArray = explode(':',$startTime);
                    $makeStart = mktime($startTimeArray[0],$startTimeArray[1],0,$dateParts[1],$dateParts[2],$dateParts[0]);
                } else {
                    $makeStart = mktime(12,0,0,$dateParts[1],$dateParts[2],$dateParts[0]);
                }
                $displayDate = date('c',$makeStart);
                $eventString .= 'start: \''.$displayDate.'\',';
                $endTime = get_post_meta($event->ID,'endtime',true);
                if($endTime != ''){
                    $endTimeArray = explode(':',$endTime);
                    $makeEnd = mktime($endTimeArray[0],$endTimeArray[1],0,$dateParts[1],$dateParts[2],$dateParts[0]);
                    $displayEndDate = date('c',$makeEnd);
                    $eventString .= 'end: \''.$displayEndDate.'\',';
                }
                $eventString .= 'url: \''.$event->guid.'\',';
                $eventString .= 'allDay: false},';                  
            }
            $eventString  = substr($eventString, 0, -1);
            echo $eventString;
        ?>
    ]
})
});
</script>

any help would be greatly appreciated.

Answer 1

Use the eventRender hook as described in the documentation. The hook provides you access to the element used to render the event. The below code removes the text, leaving the box as is.

<script type="text/javascript">
$(document).ready(function(){
$('#calendar').fullCalendar({
// your other code here
    eventRender: function(event, element) {
        $(element).
          remove(".fc-event-time"). // the time span in a full calendar event
          remove(".fc-event-title"); // the title span in a full calendar event
    }
})
});
</script>