亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

FullCalander 5 添加事件

FullCalander 5 添加事件

泛舟湖上清波郎朗 2022-12-29 10:31:17
我正在構建一個 CRM 并嘗試在日歷 div 之外制作一個按鈕,如果我按下按鈕,它應該在上創建一個事件并且它不起作用。有人可以指出我做錯了什么嗎?這是我試過的:  $(document).on("click", "#testbtn", function(){    var calendarEl = $("#calendar");    calendarEl.addEvent({events: [      {        title: 'Second Event',        start: '2020-08-08T12:30:00',        end: '2020-08-08T13:30:00'      }    ]});  });這是我的整個腳本:<html><body><script src='../lib/main.js'></script><script>  document.addEventListener('DOMContentLoaded', function() {    var calendarEl = document.getElementById('calendar');    var calendar = new FullCalendar.Calendar(calendarEl, {    <!-- all the options here -->    calendar.render();  });</script></head><body><button id="testbtn">Add lunch time</button>  <div id='calendar-container'>    <div id='calendar'></div>  </div><script src="/assets/plugins/jquery/jquery.min.js"></script><script>  var options = {  /*Add options here*/};  var calendarEl = $("#calendar");  var calendar = new FullCalendar.Calendar(calendarEl, options);  $(document).on("click", "#testbtn", function(){    calendar.addEvent({      title: 'Lunch',      start: '2020-08-08T12:30:00',      end: '2020-08-08T13:30:00'    });    calendar.render();  });</script>
查看完整描述

2 回答

?
白板的微信

TA貢獻1883條經驗 獲得超3個贊

有兩個問題:

  1. calendarEl是一個 DOM 元素。它沒有.addEvent屬性(至少沒有 FullCalendar 屬性。)

  2. 的參數addEvent是單個Event 對象,而不是具有鍵events和事件數組作為值的對象。

addEvent演示可能對您有所幫助。

您需要將使用關鍵字FullCalendar.Calendar創建的實例傳遞給事件處理函數。new

  var calendarEl = $("#calendar").get(0);

  var calendar = new FullCalendar.Calendar(calendarEl, {

    initialView: 'dayGridMonth'

  }); 

  calendar.render();

  $("#testbtn").on("click", function(){

    calendar.addEvent({

        title: 'Second Event',

        start: '2020-08-08T12:30:00',

        end: '2020-08-08T13:30:00'

      });

  });


查看完整回答
反對 回復 2022-12-29
?
明月笑刀無情

TA貢獻1828條經驗 獲得超4個贊

看起來您需要在加載 jquery 腳本后發布此信息。這已經加載了事件。我們只是添加一個事件。


身體


<body>

<button id="testbtn">Add lunch time</button>

  <div id='calendar-container'>

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

  </div>

<script src="/js/jquery/jquery.min.js"></script>

</body>

然后調用全日歷插件


<script>

  var calendarEl = $("#calendar").get(0);

  var calendar = new FullCalendar.Calendar(calendarEl, {

    /*options...*/

    events:

            [

              {

                id: 1,

                title: 'First Event',

                start: '2020-08-08T10:30:00',

                end: '2020-08-08T11:30:00',

                extendedProps: {

                  description: 'Test 1'

                },

                color: '#336e03'

              },


              {

                id: 2,

                title: 'Second Event',

                start: '2020-08-08T15:30:00',

                end: '2020-08-08T16:30:00',

                extendedProps: {

                  description: 'Test 2'

                },

              }

            ]


  });


  calendar.render();

/*this is the action when the button is pressed*/

  $("#testbtn").on("click", function(){

    calendar.addEvent({

      title: 'Third Event',

      start: '2020-08-08T12:30:00',

      end: '2020-08-08T13:30:00'

    });

  });

</script>


查看完整回答
反對 回復 2022-12-29
  • 2 回答
  • 0 關注
  • 91 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號