CODEWITHSUNDEEP
javascriptjqueryfullcalendar
Vishal Singh
Vishal Singh

Reputation: 73

Full-calendar start date today

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/

Upvotes: 1

Views: 25729

Answers (10)

Mohsen Najafzadeh
Mohsen Najafzadeh

Reputation: 421

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()
              ...
              ...
        });

Upvotes: 0

uriateho
uriateho

Reputation: 9

$(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
    });
});

Upvotes: 0

Ramdrupal7
Ramdrupal7

Reputation: 69

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,

Upvotes: 0

Mukesh Panchal
Mukesh Panchal

Reputation: 1966

Add the below code:

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

For more information, check this link.

Upvotes: 0

Brijal Savaliya
Brijal Savaliya

Reputation: 1091

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.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script type='text/javascript' src='//ajax.googleapis.com/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>

Upvotes: -1

Juan Ortiz
Juan Ortiz

Reputation: 123

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>

Upvotes: 0

Rbar
Rbar

Reputation: 3918

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.

Upvotes: 0

Vishal Singh
Vishal Singh

Reputation: 73

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,

Upvotes: -1

Sourav Purkait
Sourav Purkait

Reputation: 344

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

Upvotes: 2

Claudiu S
Claudiu S

Reputation: 1627

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

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

Upvotes: 5

Related Questions