How to display the Calendar Event's Subject wi

问题:

I am using the FullCalendar UI to display calendar events from a table in the database.

The issue that I am having is, when I have an event that is less than 1 hour in duration length, the subject of that event will not be viable. I have attached a screenshot to show you how it is currently being displayed.

When looking at the the first event "IT Meeting" it appears with no problem. On the other hand, the next event (ie. starts at 5:24PM - 6:00 PM) the subject is not readable. How or what can I do to make the subject viable so the user knows what he/she have scheduled?

Thank you

回答1:

To get around this issue I used http://qtip2.com/. (For earlier versions of fullcalendar)

http://jsfiddle.net/marcrazyness/cjn4vxbm/

$(document).ready(function () {    
    $('#myCalendar').fullCalendar({
        events: [
            {
                title: 'event',
                start: '2014-10-01',
                description: 'My Event Description',
                allDay: true
            }
        ],
        eventRender: function(event, element) {
        // Here using qtip to set hover message.
        element.qtip({
            content: event.description,
            // Position (optional)
            position: {
                my: 'center center',
                at: 'center center',
                target: $(element)
            }
        });
        }
    });
});

EDIT! From Mike's @MikeSmithDev reply the latest stock version of fullcalendar 2.1.1 handles this for you:

回答2:

Your problem has to do with the styling of calendar. So it doesn't make sense to change anything in the functionality (using JS).

I would recommend the following CSS code:

.fc-view.fc-agendaDay-view.fc-agenda-view .fc-time-grid-event.fc-event .fc-content .fc-time {display:inline-block;}
.fc-view.fc-agendaDay-view.fc-agenda-view .fc-time-grid-event.fc-event .fc-content .fc-title {display:inline-block; margin-left:7px;}

The title of the event will be written next to the time block.

Nothing is broken in the functionality.

Keep in mind that you need to write this CSS code after loading the initial CSS code of this plugin, otherwise, you'll have to use "!important" to override the original code.

回答3:

From your comment "is there a way I can just put the title next to the time when there is an overflow?"

Yes. Assuming you are using at least FullCalendar 2.1.1, the time is put in a div with class .fc-time and the title has class of .fc-title. So, the simplest fix is just doing something like adding an updated style:

.fc-time {display:inline-block !important;}
.fc-title {display: inline-block !important;}

Now lets say you want don't like that because it is too easy and you need to do more manipulation with it. So, let's just hide the title with CSS and cram it in there with the time:

change the CSS to .fc-title {display: none;}

and now let's change the eventRender

eventRender: function (event, element) {
    var title = '<span class="someCoolClass"> ' + event.title + "</span>";
    element.find('.fc-time').html(moment(event.start).format('h:mm') +" going until " + moment(event.end).format('h:mm') + title);
}

So that is a little excessive, but it shows some drastic manipulation the the time/title. I've also done similar things by putting more information in a boostrap modal or jQuery UI dialog if you are interested.

But that doesn't answer your other question of only doing this when there would be overflow. How about only doing it when the time is 30 minutes or less? So changing the eventRender above to:

eventRender: function (event, element) {
    var timeSpan = event.end - event.start;
    var delim = "<br>"; /*break between time and title*/
    if (timeSpan <= 1800000) { /*30 min or less! Replace the break with a colon*/
        delim = ": ";
    }
    element.find('.fc-time').html(moment(event.start).format('h:mm') +" - " + moment(event.end).format('h:mm') + delim + event.title );
}

Though I'll caveat that I used the eventRender stuff on older versions of FullCalendar, but when testing on 2.1.1 it didn't even seem necessary as it was adjusting the display appropriately. So, it may be just as easy as upgrading. If not, you can use the eventRender function (though on older versions I think it was a different class like fc-event-time or something).

回答4:

Still using the eventRender callback (as MarCrazyness suggested), you can alter the html bloc any way you like :

eventRender: function(event, element) {
    // event is the javascript object
    // element is the html bloc, which already contains
    //    the time section, the body section etc...
    if (event.end - event.start < 1hour ) { //<- write the real code to check if this is less than an hour
        $(element).find('.fc-title').html('');
        $(element).find('.fc-time').append(event.title);
    }
}

回答5:

I downloaded the new version of the fullcalendar 2.1.1 and that solved the problem.

I guess the version is which I was using had a bug.