javascript - Full-calendar start date today - Stack Overflow

admin管理员组

文章数量:1287101

I am trying really hard to make full-calendar to start from today.

It displays the full week when I do this:

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

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

where currentDate is today.

Reference (click on calendar tab...): /

I am trying really hard to make full-calendar to start from today.

It displays the full week when I do this:

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

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

where currentDate is today.

Reference (click on calendar tab...): http://flickfootball.in/

• javascript
• jquery
• fullcalendar

Share Improve this question Follow edited Jan 26, 2020 at 14:43 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Apr 18, 2016 at 7:43 Vishal SinghVishal Singh 7311 gold badge33 silver badges1111 bronze badges

Add a ment  | 

10 Answers 10

Sorted by: Reset to default 5

FullCalendar depends on moment.js, so you can do:

var today = moment().day();
$('#calendar').fullCalendar({
  firstDay: today
});

<script>
  $('#calendar').fullCalendar({
    defaultDate: moment().format("YYYY-MM-DD")
  });
</script>

Set the defaultDate like so:

$('#calendar').fullCalendar('today')

Example

$('#calendar').fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,listYear'
        },
        defaultDate: $('#calendar').fullCalendar('today'),  // THIS IS WHAT YOU'RE LOOKING FOR
        nowIndicator: true,
        navLinks: true, // Click day/week names to navigate to date
        editable: true, // Allows drag/drop
        eventLimit: true, // Allow "more" link when too many events
        events: [] // An array of your events here
});

There is more in the documentation for getting the current day here.

You can use PHP.

First, you need set the time to use:

<?php
    date_default_timezone_set('America/Manaus');
    $today = date("Y-m-d"); // Use this format
?>

Second, call the variable in fullcalendar:

<script>
    $(document).ready(function() {

        $('#calendar').fullCalendar({
            defaultDate: <?php echo "'" . $today . "'"; ?>, // yyyy + "-" + mm + "-" + dd,
        });
    });
</script>

Add the below code:

$('#my-today-button').click(function() {
  $('#calendar').fullCalendar('today');
});

For more information, check this link.

Refer to this Stack Overflow answer:

How to show a description of Events in fullcalendar

// I am using moment.js for taking a date as today - today_date = moment().format('YYYY-MM-DD');

// In this line I am giving the default date as today. - defaultDate: today_date,

$(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: moment(), // Use moment() as the current date
        editable: true,
        eventLimit: true, // Allow the "more" link when there are too many events
    });
});

You can set value of initial date to today's date with:

        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
              ...
              ...
              initialDate: new Date()
              ...
              ...
        });

I found a hack, though not a proper solution.

Full-calendar allows you to start your calendar with firstDay: ''.

So just find out which day is it today and set that to firstDay.

So calendar starts from that date.

var d = new Date();
var t = d.getDay();

firstDay: t,

Do you want it like the following?

Try this:

$(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2016-01-12',
        editable: true,
        eventLimit: true, // Allow "more" link when too many events
    });
});

<link rel='stylesheet' href='http://fullcalendar.io/js/fullcalendar-2.6.1/fullcalendar.min.css' />

<script src='//cdnjs.cloudflare./ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script type='text/javascript' src='//ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.6.1/fullcalendar.min.js'></script>
<link rel='stylesheet' href='http://fullcalendar.io/js/fullcalendar-2.6.1/fullcalendar.min.css' />
<div id='calendar'></div>

本文标签： javascriptFullcalendar start date todayStack Overflow