CODEWITHSUNDEEP
javascripthtmlfullcalendar
Sukiyam
Sukiyam

Reputation: 81

FullCalendar - Add links to events

Hi i am trying to use the fullcalendar plugin to create a calendar. 

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>

    $(document).ready(function() {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

            selectable: true,
            selectHelper: true,

            select: function(start, end) {
                var title = prompt('Event title');
                var eventData;
                if (title) {
                    eventData = {
                        title: title,
                        start: start,
                        end: end
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                }
                $('#calendar').fullCalendar('unselect');
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events

            events: [
                {
                    title: 'All Day Event',
                    start: '2015-12-01'
                },
                {
                    title: 'Long Event',
                    start: '2015-12-07',
                    end: '2015-12-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2015-12-09T16:00:00'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2015-12-16T16:00:00'
                },
                {
                    title: 'Conference',
                    start: '2015-12-11',
                    end: '2015-12-13'
                },
                {
                    title: 'Meeting',
                    start: '2015-12-12T10:30:00',
                    end: '2015-12-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2015-12-12T12:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2015-12-12T14:30:00'
                },
                {
                    title: 'Happy Hour',
                    start: '2015-12-12T17:30:00'
                },
                {
                    title: 'Dinner',
                    start: '2015-12-12T20:00:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2015-12-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2015-12-28'
                }
            ]

        });

    });

</script>
<style>

    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }

</style>
</head>
<body>

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

</body>
</html>

Here are the codes. However i want to do it in a way that when a person click on any of the date, it will redirect them to another html page. i went to research online and found out that it got something to link to dayclick or eventclick function. However i dont really know how to apply into it to suit my needs. hope anyone could help me. Help would be appreciated alot. Thanks in advance. :)

Upvotes: 6

Views: 20131

Answers (4)

A SHAHZAD
A SHAHZAD

Reputation: 176

In version 4.0 onward, you can do like that.

From the backend, you can provide any link, custom html, or whatever you want, then in the render function you repopulate like below:

eventRender: function (info) {
    var customTitleForMonth = info.event.title;
    $(info.el).find('.fc-title').html(customTitleForMonth);/*For Month,Day and Week Views*/
    var customTitleForList = info.event.title.replace("target=", "style='color:black;text-decoration:underline;' target=");
    $(info.el).find('.fc-list-item-title').html(customTitleForList);/*For List view*/
    $(info.el).find('.fc-content').css('min-height', '70px');
},

where info.event.title is the title which contains the custom html.

Upvotes: 0

Fanky
Fanky

Reputation: 1786

This is how to make the link open in new tab:

events: [
 {
 title: 'All Day Event',
 start: '2015-12-01',
 link_to_url: 'http://example.com' //if you use "url:", it will redirect you in the same tab with no Back functionality
 }
]

and in the initialization use

eventRender: function (info) {
 if (info.event.extendedProps.link_to_url != null && info.event.extendedProps.link_to_url != "") {
    $(info.el).attr("href", info.event.extendedProps.link_to_url);
    $(info.el).attr("target", "_blank");
 }
}

A note: when I tried the answers mentioned by @Harry and @Ravi, I lost the possibility to get back by browser Back button (Firefox).

Upvotes: 2

Ravi S. Singh
Ravi S. Singh

Reputation: 657

use:

select:function()

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>

    $(document).ready(function() {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

            selectable: true,
            selectHelper: true,
            select: function(start, end, jsEvent, view){
              //wrtie your redirection code here
              var root_url="http://localhost/";
              window.location = root_url+"test1.html"
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events

            events: [
                {
                    title: 'All Day Event',
                    start: '2015-12-01'
                },
                {
                    title: 'Long Event',
                    start: '2015-12-07',
                    end: '2015-12-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2015-12-09T16:00:00'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2015-12-16T16:00:00'
                },
                {
                    title: 'Conference',
                    start: '2015-12-11',
                    end: '2015-12-13'
                },
                {
                    title: 'Meeting',
                    start: '2015-12-12T10:30:00',
                    end: '2015-12-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2015-12-12T12:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2015-12-12T14:30:00'
                },
                {
                    title: 'Happy Hour',
                    start: '2015-12-12T17:30:00'
                },
                {
                    title: 'Dinner',
                    start: '2015-12-12T20:00:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2015-12-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2015-12-28'
                }
            ]

        });

    });

</script>
<style>

    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }

</style>
</head>
<body>

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

Upvotes: 3

Harry
Harry

Reputation: 369

You can just use the url property in the event data as follows:

events: [
  {
    title: 'All Day Event',
    start: '2015-12-01',
    url: 'http://google.com'
  }

If you look at the docs here: http://fullcalendar.io/docs/event_data/Event_Object/ you can see all the different properties you can use.

Upvotes: 13

Related Questions