Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of the callback processing methods of switching months such as fullcalendar next and prev, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on the callback processing methods of switching months such as fullcalendar next and prev. Let's take a look.

Solution

There is no callback function for fullcalendar next, prev and other buttons to switch months. If you want to use the callback function, you must use customButtons (custom button, official document), which can provide the callback function, and then use the callback function by calling this.$refs.calendar.$options.calendar.next (); or calendar.next (); to switch months.

Example core code fullcalendar setup and rendering

Var nowDate = new Date (); var nowDateStr = nowDate.Format ("yyyy-MM-dd"); var option = {initialDate: nowDateStr, / / default Sunday as the first day / / firstDay: 1, / / whether the calendar in the calendar can be edited. Editable means that you can move and change the size of editable: false, dayMaxEvents: true, / / whether the day / week name is clickable, including weekly weekNumber. After clicking, you can jump to the day / week view. Default false navLinks: false, dateClick: dateClick, / / Custom button customButtons: {prevYearCustom: {text: 'previous year', click: function () {prevYearCustomClick () }, prevMonthCustom: {text: 'last month', click: function () {prevMonthCustomClick ();}}, nextMonthCustom: {text: next month, click: function () {nextMonthCustomClick ();}}, nextYearCustom: {text: 'next year', click: function () {nextYearCustomClick () }, todayCustom: {text: 'today', click: function () {todayCustomClick ();}}, / / head button layout display settings headerToolbar: {right: 'prevYearCustom,prevMonthCustom,nextMonthCustom,nextYearCustom todayCustom',}, events: []}; var calendar = fullcalendar.initCalendar ("calendar", option)

Click event definition

/ / date Click event function dateClick (info) {console.log (info);} / previous year Click function prevYearCustomClick () {calendar.prevYear (); renderCalendar ();} / Last month Click function prevMonthCustomClick () {calendar.prev (); renderCalendar ();} / next month Click function nextMonthCustomClick () {calendar.next (); renderCalendar ();} / / next year Click function nextYearCustomClick () {calendar.nextYear (); renderCalendar () } / / Today, click function todayCustomClick () {calendar.today (); renderCalendar ();} / refresh the data of Calendar function renderCalendar () {/ / TODO: call the API to get the data, which is defined as empty array var events= []; calendar.setOption ('events', events);}

Display effect

Note:

The start and end of the fullcalendar events schedule data source correspond to the start date and end date, respectively. If the start date and end date are on the same day, then end defaults to null in the @ eventClick callback parameter.

This is the end of this article on how to handle callbacks in switching months such as fullcalendar next and prev. Thank you for reading! I believe you all have a certain understanding of "fullcalendar next and prev callback processing methods for switching months". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.