CODEWITHSUNDEEP
javascriptfullcalendar
Jack jdeoel
Jack jdeoel

Reputation: 4584

How to modify fullcalendar columnFormat with bracket?

I need to display like this 10/15 (Sun) as my client want ! But if I set that format on columnFormat ,it can't display within bracket text . How can I set M/D (ddd) to display in columnFormat . But you know , other like {ddd} is can display on week column

$("#calendar").fullCalendar({
    header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
        },
        defaultView: 'agendaWeek',
        views : {
           agendaWeek : {
              columnFormat : "M/D (ddd)"
           }
        }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.js"></script>
<div id="calendar"></div>

Upvotes: 1

Views: 1640

Answers (3)

KaraKaplan
KaraKaplan

Reputation: 798

Try this. columnFormat : "M/D ddd"

When I tried brackets like this (ddd) it didn't work.

Upvotes: 0

Jack jdeoel
Jack jdeoel

Reputation: 4584

After I have been researching nearly 9 hour , I got easy solution one if I put [] on each bracket !!! :)

columnFormat : "M/D [(]ddd[)]"   //added => []
//                  ^ ^   ^ ^

Upvotes: 2

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21756

I am not sure if you can add bracket around day but I hope below will work for you :

$("#calendar").fullCalendar({
    header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
        },
        defaultView: 'agendaWeek',
        views : {
           agendaWeek : {
              month: 'dddd',    // Sun, Mon,Tue etc
            week: 'dddd, MMM dS', // Fri 10/20
            day: 'dddd, MMM dS'  // Friday 10/20
           }
        }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.js"></script>
<div id="calendar"></div>

Upvotes: 0

Related Questions