Question

我有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>内编写事件。我如何在运行时添加更多事件？当我切换教授时，我想将所有子项添加到日历中。

Answer 1

我是这样做的：

$(document).ready(function() {
    $('#calendar').fullCalendar({});
});

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

在运行时填写日历

1 个答案: