Javascript 第一次初始化时如何将完整日历设置为特定的开始日期?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8174744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 04:58:04  来源:igfitidea点击:

How to set full calendar to a specific start date when it's initialized for the 1st time?

javascriptjqueryfullcalendar

提问by Stefan

I would like to set the initial month to an arbitrary month when I call the function to display the calendar.

当我调用函数来显示日历时,我想将初始月份设置为任意月份。

Say for example the user selects a date last june (June 2011) somewhere else and I want fullcalendar to show up with a month display of April before (April 2010). And yes, this is just to make a case, not to make sense ;-) )

比如说,用户在其他地方选择了去年六月(2011 年 6 月)的日期,我希望 fullcalendar 显示在 4 月之前(2010 年 4 月)的月份显示。是的,这只是为了说明问题,而不是为了有意义 ;-) )

I tried to call 'gotodate' before I then subsequently call the display function but this doesn't seem to work

我尝试在随后调用显示函数之前调用“gotodate”,但这似乎不起作用

$('#calendar').fullCalendar( 'gotoDate', currentdate);
$('#calendar').fullCalendar({
    header: {left: 'prevYear,prev,today,next,nextYear',
         center: 'title', right: 'month,basicWeek,basicDay' etc...}

Could someone eventually please provide an example how to do this properly?

有人最终可以提供一个如何正确执行此操作的示例吗?

回答by Jammerms

You should use the options 'year', 'month', and 'date' when initializing to specify the initial date value used by fullcalendar:

您应该在初始化时使用选项 'year'、'month' 和 'date' 来指定 fullcalendar 使用的初始日期值:

$('#calendar').fullCalendar({
 year: 2012,
 month: 4,
 date: 25
});  // This will initialize for May 25th, 2012.

See the function setYMD(date,y,m,d)in the fullcalendar.jsfile; note that the JavaScript setMonth, setDate, and setFullYear functions are used, so your month value needs to be 0-based (Jan is 0).

见函数setYMD(date,y,m,d)fullcalendar.js的文件; 请注意,使用了 JavaScript setMonth、setDate 和 setFullYear 函数,因此您的月份值需要从 0 开始(Jan 为 0)。

UPDATE: As others have noted in the comments, the correct way now (V3 as of writing this edit) is to initialize the defaultDate property to a value that is

更新:正如其他人在评论中指出的那样,现在的正确方法(编写此编辑时为 V3)是将 defaultDate 属性初始化为一个值

anything the Moment constructor accepts, including an ISO8601 date string like "2014-02-01"

Moment 构造函数接受的任何内容,包括 ISO8601 日期字符串,如“2014-02-01”

as it uses Moment.js. Documentation here.

因为它使用 Moment.js。 文档在这里

Updated example:

更新示例:

$('#calendar').fullCalendar({
    defaultDate: "2012-05-25"
});  // This will initialize for May 25th, 2012.

回答by Brandon

You have it backwards. Display the calendar first, and then call gotoDate.

你把它倒过来了。先显示日历,然后调用gotoDate

$('#calendar').fullCalendar({
  // Options
});

$('#calendar').fullCalendar('gotoDate', currentDate);

回答by StuartLC

As per machineAddict's comment, as of version 2 and later, year, month and dayhave been replaced by defaultDate, which is a Moment, supporting constructors such as an ISO 8601date string or a Unix Epoch.

根据 machineAddict 的评论,从版本 2 及更高版本开始,year, month and day已被替换defaultDateMoment,支持构造函数,例如ISO 8601日期字符串或 Unix Epoch。

So e.g. to initialize the calendar with a given date:

因此,例如使用给定日期初始化日历:

$('#calendar').fullCalendar({
    defaultDate: moment('2014-09-01'),
    ...
});

回答by CIRCLE

You can just pass a Dateobject:
For current date:

您可以只传递一个Date对象:
对于当前日期:

$('#calendar').fullCalendar({
    defaultDate: new Date()
});

For specific date '2016-05-20':

对于特定日期“2016-05-20”:

$('#calendar').fullCalendar({
    defaultDate: new Date(2016, 4, 20)
});

回答by Eric Parshall

I've had better luck with calling the gotoDatein the viewRendercallback:

gotoDateviewRender回调中调用了更好的运气:

$('#calendar').fullCalendar({
  firstDay: 0,
  defaultView: 'basicWeek',
  header: {
    left: '',
    center: 'basicDay,basicWeek,month',
    right:  'today prev,next'
  },
  viewRender: function(view, element) {
    $('#calendar').fullCalendar( 'gotoDate', 2014, 4, 24 );
  }
});

Calling gotoDateoutside of the callback didn't have the expected results due to a race condition.

调用gotoDate回调并没有预期的效果之外,由于竞争状态。

回答by BAAC

In version 2.1.1 this works :

在 2.1.1 版中,这有效:

$('#calendar').fullCalendar({
// your calendar settings...
});

$('#calendar').fullCalendar('gotoDate', '2014-05-01');

Documentation about moment time/date format : http://fullcalendar.io/docs/utilities/Moment/Documentation about the upgrades in version 2 : https://github.com/arshaw/fullcalendar/wiki/Upgrading-to-v2

关于时刻时间/日期格式的 文档:http: //fullcalendar.io/docs/utilities/Moment/关于版本 2 升级的文档:https: //github.com/arshaw/fullcalendar/wiki/Upgrading-to-v2

回答by Jan Hoeppner

If you don't want to load the calendar twice and you don't have a version where defaultDate is implemented, do the following:

如果您不想两次加载日历并且您没有实现 defaultDate 的版本,请执行以下操作:

Change the following method:

更改以下方法:

function Calendar(element, options, eventSources) { ... var date = new Date(); ... }

function Calendar(element, options, eventSources) { ... var date = new Date(); ... }

to:

到:

function Calendar(element, options, eventSources) { ... var date = options.defaultDate ? options.defaultDate : new Date(); ... }

function Calendar(element, options, eventSources) { ... var date = options.defaultDate ? options.defaultDate : new Date(); ... }