CODEWITHSUNDEEP
javascriptjqueryfullcalendar
pavan
pavan

Reputation: 73

Fullcalendar Add Event

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

Upvotes: 5

Views: 10351

Answers (2)

Pankaj Upadhyay
Pankaj Upadhyay

Reputation: 2138

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script>
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/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.com/',
            start: '2019-11-28'
        }
    ]
});

Upvotes: 0

Harlley Oliveira
Harlley Oliveira

Reputation: 51

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 );
    }
});

Upvotes: 5

Related Questions