Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Title on FullCalendar month view not displaying properly

Please check out the web page I am making at https://preview.c9.io/tomheaps/enharmonic/Website/enharmonic_calendar.html?_c9_id=livepreview2&_c9_host=https://ide.c9.io which has an embedded google calendar, styled using the jquery plugin FullCalendar.

As you will see, when you click on month view, the title is not displaying properly with some strange characters between the two dates and shows '1st — 7th June 2015' instead of '1st - 7th June 2015' for example.

I am not sure if this is happening because I am using Open Sans as the font for this title and it doesn't contain the glyph that is inserted automatically by the javascript?

Can anyone think of a workaround for this that allows me to still use Open Sans?

like image 893
Tom Heaps Avatar asked Jun 07 '15 19:06

Tom Heaps


People also ask

How do I display an image in FullCalendar?

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):

How do I set events in FullCalendar?

Here is an example of how to specify an array of events: var calendar = new Calendar(calendarEl, { events: [ { title : 'event1', start : '2010-01-01' }, { title : 'event2', start : '2010-01-05', end : '2010-01-07' }, { title : 'event3', start : '2010-01-09T12:30:00', allDay : false // will make the time show } ] });

How do I change the initial date in FullCalendar?

The initial date displayed when the calendar first loads. When not specified, this value defaults to the current date. This value can be anything that can parse into a Date, including an ISO8601 date string like "2014-02-01" .

How do I uninstall FullCalendar 12a?

To delete "12a", add displayEventTime: false . This is the correct answer.


2 Answers

I had the same issue I was seeing â instead of —. It is a codification problem.

I solved it easily:

Observation:

  • In fullcalendar v.3.9.0, the titleRangeSeparator from the fullcalendar.js is '\u2013' which is correct.
  • However, fullcalendar.min.js the titleRangeSeparator is .

Solution:

  • I changed manually the value of titleRangeSeparator from the file fullcalendar.min.js from'-' to '\u2013' --> problem fixed.
like image 78
Pol Fernández Avatar answered Sep 22 '22 06:09

Pol Fernández


Tom, make sure that you are serving your HTML as UTF-8: header("Content-Type: text/html; charset=utf-8");

Include the tag below right after the html tag.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
like image 22
Thiago Avelino Avatar answered Sep 20 '22 06:09

Thiago Avelino