Change design of calendar

[adrianriepl]

How can I change the design of the calendar? I know I could override the css classes of fullcalendar but I want to change the HTML output of the calendar. As example I want to put the title below the calendar or show a different month view than the one in the demo? How is there a way to change design to my needs?

[flick36]

vm.calendarUiConfig = {
    viewRender: function (view)
        {
            vm.calendarView = view;
            vm.calendar = vm.calendarView.calendar;
            vm.currentMonthShort = vm.calendar.getDate().format('MMM');
        }
}

and in your HTML you could make something like:

<div class="title">
    {{vm.calendarView.title}}
</div>

[peterver]

@adiii4 ui-calendar is merely a wrapper on top of fullCalendar, this is probably not the best place to ask a question about full calendar design :].

However, as per the question at hand i believe @flick36 has given a clue as to how you could achieve the required result.

Take a look at any of the following

• http://fullcalendar.io/docs/display/viewRender/ : used when a new date-range ( f.ex : next/previous button is pressed) is rendered, or the type of view is changed ( such as switching from month to week )
• http://fullcalendar.io/docs/display/dayRender/ : used when a date cell is rendered ( this is the wrapper for a day )
• http://fullcalendar.io/docs/event_rendering/eventRender/ : used when an event is rendered.

These 3 cb hooks should provide you with a ton of functionality to customise the calendar to your needs :].

Closing the issue for now, if you have any more questions please direct them to us in a new issue and link to this issue.