在运行时填充日历

我有一个list of teachers，在这个列表中有一个sublist with disciplines
我需要创建一个类似week calendar的东西来显示点击/选择的教授的学科。这些学科有一个数据矩阵来确定一周中的哪一天以及开始的时间。

像这样：

 <li data-day="Monday"data-time="08:30:00"> Database Fundamentals</li>

列表/子列表如下：Codepen.Io

所以我需要在Monday, starting: 8:00:00上插入这个规程，我还可以添加另一个数据属性，以便稍后知道结束时间。

我不知道的是：

现在我使用FullCalendar（找不到比这更好的了）
我正在手动编写一些事件，只是为了进行这样的测试：

<!DOCTYPE html>
<html>  
<head>      
    <meta charset="UTF-8">
    <title>Calendario</title>       
    <script src='calendario/lib/moment.min.js'></script>
    <script src='calendario/fullcalendar.js'></script>
    <script src='calendario/lang/pt-br.js'></script>
    <link rel='stylesheet' href='calendario/fullcalendar.css'/>
    <script type="text/javascript">
    $(document).ready(function(){
        var date = new Date();
        var dia = date.getDate();
        var m = date.getMonth()+1; //January is 0
        var mes = m < 10 ? '0' + m : '' + m;
        var ano = date.getFullYear();
        var data = ano + '-' + mes + '-' + dia;

        //Page is now ready, initialize calenda.
        $('#calendario').fullCalendar({
            header: {
                center: 'title',
                left: '',
                right: ''
            },          
            height: 800,
            defaultView: 'agendaWeek',  
            views: {
                week: {
                    columnFormat: 'dddd'
                }
            },
            firstDay: 1,
            weekends: false,
            events: [
                {
                    title: 'Event1',
                    start: ano + '-' + mes + '-' + dia,
                    end: ano + '-' + mes + '-' + dia + 'T04:00'
                }
            ],
        })
    });
</script>
</head>
<body>  
    <div class="teste">
        <div id="calendario"></div>
    </div>
</body>
</html>

正如您所看到的，我必须将<scrip>中的事件写在头上。如何在运行时中添加更多事件？当我切换教授时，我想将所有子项添加到日历中。

以下是我的操作方法：

$(document).ready(function() {
    $('#calendar').fullCalendar({});
});
$('#addEvent').click(function() {
  $('#calendar').fullCalendar(
    'renderEvent',
    {
      title: 'Novo evento',
      start: '2016-03-31',
    }
  );
});

相关内容

最新更新

热门标签：