FullCalendar - 添加链接到事件

嗨，我想使用fullcalendar插件来创建日历。FullCalendar - 添加链接到事件

<!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>

这里是代码。然而，我想这样做，当一个人点击任何日期时，它会将它们重定向到另一个html页面。我去网上调查，发现它有一些链接到dayclick或eventclick功能。但是我真的不知道如何应用它来适应我的需求。希望任何人都可以帮助我。帮助将不胜感激。提前致谢。 :)

来源

2016-01-04 Sukiyam

你可以使用url属性的事件数据如下：

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

如果你看看这里的文档：http://fullcalendar.io/docs/event_data/Event_Object/你可以看到所有你可以使用不同的属性。

来源

2016-01-04 17:47:49 Harry

不起作用。 – Ovis

使用：

选择：（）函数

<!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>

来源

2016-01-04 18:32:37

您好，感谢您的回复。但是，我可以问你一个关于如何编写重定向代码的非常愚蠢的问题吗？如果我的重定向是一个名为testing.html的文件。我该怎么写呢？ – Sukiyam

window.location =“http://www.stackoverflow.com”; –

嗨，先生，谢谢你的回复，它为我解决了很多谢谢。：'） – Sukiyam

FullCalendar - 添加链接到事件

回答

相关问题