Hey, I need to switch from jquery weekcalendar to fullcalendar and I am having troubles with understanding of adding new events. In weekcalendar its easy, I trigger the addEvent functions, open the dialog box and there I have my form and save everything ok with ajax. I also have a selectbox where are all times from the settings of first hour and end hour of the day. Is it possible to have something simmilar in fullcalendar? Weekcalendar has getTimeslotTimes() which deals with the time and it is easy to operate with it, what is the name of such function in fullcalendar?

Cheers

Hey, I need to switch from jquery weekcalendar to fullcalendar and I am having troubles with understanding of adding new events. In weekcalendar its easy, I trigger the addEvent functions, open the dialog box and there I have my form and save everything ok with ajax. I also have a selectbox where are all times from the settings of first hour and end hour of the day. Is it possible to have something simmilar in fullcalendar? Weekcalendar has getTimeslotTimes() which deals with the time and it is easy to operate with it, what is the name of such function in fullcalendar?

Cheers

• javascript
• jquery
• fullcalendar

2 Answers 2

You can use the dayclick event:

var calendar = $('#calendar');
calendar.fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        calendar.fullCalendar('renderEvent', { title: 'YOUR TITLE', start: date, allDay: true }, true );
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://momentjs./downloads/moment.min.js"></script>
<script src='https://cdnjs.cloudflare./ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script>
<link rel='stylesheet' href="https://cdnjs.cloudflare./ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" />
$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    //defaultDate: '2014-06-12',
    defaultView: 'month',
    editable: true,
    events: [
        {
            title: 'All Day Event',
            start: '2019-11-11'
        },
        {
            title: 'Long Event',
            start: '2019-09-09',
            end: '2019-11-11'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2019-06-11T16:00:00'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2019-06-11T16:00:00'
        },
        {
            title: 'Meeting',
            start: '2019-06-11T10:30:00',
            end: '2014-06-12T12:30:00'
        },
        {
            title: 'Lunch',
            start: '2019-11-12T12:00:00'
        },
        {
            title: 'Birthday Party',
            start: '2019-11-13T07:00:00'
        },
        {
            title: 'Click for Google',
            url: 'http://google./',
            start: '2019-11-28'
        }
    ]
});