fullcalendar-无法获取所选月份的月份和年份

Posted 2023-02-25

【中文标题】fullcalendar-无法获取所选月份的月份和年份

【英文标题】：fullcalendar- unable to get month and year of the selected month

【发布时间】：2016-12-28 08:11:57

【问题描述】：

事情是这样的，

我正在为我的网站上的用户制作日历视图，我可以在其中显示他们的每月会议和分类信息。 我正在使用全日历。仅启用了月视图。还有下一个和上一个箭头按钮。

这就是我想要做的。当用户单击其中一个箭头按钮时，我将获取所选月份的月份和年份信息，并使用 ajax 调用将其传递给后端服务，以获取他/她的会议并将其显示在该日历上。

但是，我无法获取月份和年份信息。我尝试了两种方法来实现这一点。

方法一

试图在 viewrender 上获取它

viewRender: function(event, view, element) 
  console.log(view.start, view.end, view.intervalStart, view.intervalEnd);
  console.log($('#calendar').fullCalendar('getDate'));
  var date = new Date();
  var m = date.getMonth();
  var y = date.getFullYear();
  console.log(m + y);

方法 1 没有结果。

方法2：我可以得到箭头按钮的点击事件，但是我得到的年份和月份总是分别是2016和11。

  $('.fc-button-prev span').click(function() 
    var date = new Date();
    var m = date.getMonth();
    var y = date.getFullYear();
    console.log(m);
  );

  $('.fc-button-next span').click(function() 
    var date = new Date();
    var m = date.getMonth();
    var y = date.getFullYear();
    console.log(y);
  );

我在我的小提琴中评论了方法 2。

这是我的FIDDLE。

如果你想看代码。

$(document).ready(function() 
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var calendar = $('#calendar').fullCalendar(
    defaultView: 'month',
    header: 
      left: 'prev,next',
      center: 'title',
      right: 'month'
    ,
    eventRender: function(event, element, view) 
      var nextEventLeft = element.offset().left + element.width() + 5;
      element.parent().children().eq(element.index() + 1).css('left', nextEventLeft);
    ,

    viewRender: function(event, view, element) 
      console.log(view.start, view.end, view.intervalStart, view.intervalEnd);
      console.log($('#calendar').fullCalendar('getDate'));
      var date = new Date();
      var m = date.getMonth();
      var y = date.getFullYear();
      console.log(m + y);
    ,

    selectable: true,
    selectHelper: true,

    year: y,
    month: m,
    date: d,

    slotMinutes: 15,
    editable: true,

    events: [
      title: 'Sales Meeting',
      start: new Date(y, m, d, 10, 30),
      end: new Date(y, m, d, 11, 30),
      allDay: false,
      className: 'fc-event-width-overirde'
    , 
      title: 'Marketing Meeting',
      start: new Date(y, m, d, 10, 30),
      end: new Date(y, m, d, 11, 30),
      allDay: false,
      className: 'fc-event-width-overirde'
    , 
      title: 'Production Meeting',
      start: new Date(y, m, d, 10, 30),
      end: new Date(y, m, d, 11, 30),
      allDay: false,
      className: 'fc-event-width-overirde'
    ]

  );
  /*
  $('.fc-button-prev span').click(function() 
    var date = new Date();
    var m = date.getMonth();
    var y = date.getFullYear();
    console.log(m);
  );

  $('.fc-button-next span').click(function() 
    var date = new Date();
    var m = date.getMonth();
    var y = date.getFullYear();
    console.log(y);
  );
  */

);

【问题讨论】：

在你的方法2中，你只是用var date = new Date();得到当前时间，这就是为什么你总是得到2016和11。你应该从日历中得到日期，也许用$('#calendar').fullCalendar('getDate')

如果当前月份视图是 2016 年 12 月，我单击上一个按钮。使用您的代码，我得到的是 Date Thu Dec 01 2016 00:00:00 GMT+0530 (IST) 而不是 11 月的日期。 @ivn

如果你再次点击，你会得到 11 月（但你会看到 10 月）...，而且总是一个月。那是因为在click 事件中，您从日历当前状态获取日期，而不是在转换之后。因此，您可以根据单击的下一个/上一个箭头添加/删除一个月，或者更好地通过 fullcalendar doc 挖掘更多内容以了解如何在过渡后获取日期...

【参考方案1】：

这是满足相同要求的工作代码。完整日历以 UNIX 系统格式隐式传递日历的开始日期和结束日期。

$('#calendar').fullCalendar(
		header: 
			left: 'prev,next',
			center: 'title',
			right: ''
		,
		editable: true,
		   eventSources: [
			   url: ' your url.. ',
	            type: 'POST',
	            data: 
	            		dataType: 'json',
		    			pagination : true,
		    			viewType : 'calendar',
						..... your params goes here ,
	            ,
	            error: function() 
	                alert('there was an error while fetching events!');
	            
		   ]
		,
		eventClick: function(calEvent, jsEvent, view) 
		
			
			
		var clickdDate =$.fullCalendar.formatDate(calEvent.start, "dd MMM yyyy");
		
			// do something with clickdDate in calendar if want
	      	
	    
	);

【参考方案2】：

您将获得完整的日期，以便您可以修改它以获得年份和月份

var moment = $('#calendar').fullCalendar('getDate').format().split('-');

moment[0] -> 表示年份 时刻[1] -> 日期