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 - 添加鏈接到事件

回答

相關問題