FullCalendar月视图上的标题未正确显示

Question

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?

Answer 1

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" />

Answer 2

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 ' \– ' 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 ' \– ' --> problem fixed.

Answer 3

I had this issue too, while developing all was fine, when deployed got this problem.

As @PolFernandez pointed out in his answer (thank you man) , the problem is that minified version of fullcalendar library had different notation for separator.

If you don't want to modify original fullcalendar.min.js you can simply set the separator in calendar initialization:

$('#calendar').fullCalendar({
    views: {
        month: { columnHeaderFormat: 'ddd', displayEventEnd: true, eventLimit: 3 },
        week: { columnHeaderFormat: 'ddd DD', titleRangeSeparator: ' \u2013 ' },
        day: { columnHeaderFormat: 'dddd' },
    },
});