Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FullCalendar event title only allowed One Line

How to make the event title in fullcalendar only one line even the title is long. By default, it is display full title, I wish to make it nice like Google Calendar.

like image 402
user1661740 Avatar asked Nov 28 '12 03:11

user1661740


People also ask

How do you pass events in FullCalendar?

A URL of a JSON feed that the calendar will fetch Event Objects from. FullCalendar will visit the URL whenever it needs new event data. This happens when the user clicks prev/next or changes views. FullCalendar will determine the date-range it needs events for and will pass that information along in GET parameters.

How do I select multiple dates in FullCalendar?

Detect when the user clicks on dates or times. Give the user the ability to select multiple dates or time slots with their mouse or touch device. Allows a user to highlight multiple days or timeslots by clicking and dragging.

What is FullCalendar eventRender?

eventRender is a great way to attach effects to event elements, such as a Tooltip. js tooltip effect: var calendar = new Calendar(calendarEl, { events: [ { title: 'My Event', start: '2010-01-01', description: 'This is a cool event' } // more events here ], eventRender: function(info) { var tooltip = new Tooltip(info.

How do I add a picture to FullCalendar event?

You can add any image url to your eventObject by adding the attribute "imageurl" inside of the events definition (if you just want the image, don't specify a title): events: [ { title : 'event', start : '2016-10-12', end : '2016-10-14', imageurl:'img/edit.


2 Answers

Look in your css file for the following entry:

.fc-event-time, .fc-event-title {
    padding: 0 1px;
}

and modify it like this

.fc-event-time, .fc-event-title {
    padding: 0 1px;
    white-space: nowrap;
}

.fc-title {
    white-space: normal;
}
like image 135
movsky Avatar answered Sep 28 '22 12:09

movsky


Instead of editing the source CSS, you can do this on the HTML page:

<style>
.fc-day-grid-event > .fc-content {
    white-space: nowrap;
}
</style>

Source: Multiline titles in fullcalendar ...

like image 21
Tony Avatar answered Sep 28 '22 14:09

Tony