CODEWITHSUNDEEP
javascriptjqueryhtmlcsscalendar
Sam Chahine
Sam Chahine

Reputation: 630

How to add schedule elements into this calendar?

I'm hoping the lack of detail in this question won't result in it being labelled as badly formatted, but I've been playing around with this codepen css/js/jquery calendar/schedule script and I can't seem to find out how to add, say, reminders on specific dates. I have a database of things I need to do and the date by which they must be completed, I can access each date element (d/m/y) individually and was wondering how to actually implement my database into this calendar.

This is the html

<!-- HTML -->
<!DOCTYPE html>
<html>
    <head>
        <title>Calendar</title>

        <!-- CSS -->
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet" />
        <link href="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet" />
        <link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.print.css" rel="stylesheet" />

        <!-- SCRIPTS -->
        <script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
        <script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
        <script class="cssdesk" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js" type="text/javascript"></script>
        <script class="cssdesk" src="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
    </head>

    <body>
        <div class="container">
            <h1>Date</h1>

            <div id='calendar'></div>
        </div>
    </body>
</html>

And nowhere in the code does it indicate a div where I can add events, I hope some one can help.

Thank you in advance.

Upvotes: 0

Views: 1736

Answers (1)

Peter Scott
Peter Scott

Reputation: 1316

You should check the calendar plugin documentation at http://fullcalendar.io

to include dates modify the javascript .. this snippet taken from the example on the homepage.

$(function() {
$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2015-02-12',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: [
        {
            title: 'All Day Event',
            start: '2015-02-01'
        },
        {
            title: 'Long Event',
            start: '2015-02-07',
            end: '2015-02-10'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2015-02-09T16:00:00'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2015-02-16T16:00:00'
        },
        {
            title: 'Conference',
            start: '2015-02-11',
            end: '2015-02-13'
        },
        {
            title: 'Meeting',
            start: '2015-02-12T10:30:00',
            end: '2015-02-12T12:30:00'
        },
        {
            title: 'Lunch',
            start: '2015-02-12T12:00:00'
        },
        {
            title: 'Meeting',
            start: '2015-02-12T14:30:00'
        },
        {
            title: 'Happy Hour',
            start: '2015-02-12T17:30:00'
        },
        {
            title: 'Dinner',
            start: '2015-02-12T20:00:00'
        },
        {
            title: 'Birthday Party',
            start: '2015-02-13T07:00:00'
        },
        {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2015-02-28'
        }
    ]
  });
});

Upvotes: 2

Related Questions