Jump to/show specific week in calendar by using week number

Question

Is there any possibility that I jump to/show specific week by using week number? For example, if I want to display week number 43, is there any way I can do that?

I know how to do it using goToDate option and then changing view to week, but is there any possibility to do it using week number?

score 1 · Accepted Answer · edited May 23 '17 at 10:33

I found the relevant function at How to convert a week number to a date in Javascript. With it, it's just a matter of passing the year and the week number and it returns a properly formatted date object:

var gotoweek = firstDayOfWeek( date.year(), date.weeks() );
$('#mycalendar').fullCalendar( 'gotoDate', gotoweek );

In the following example, clicking on any day will take us to the week view of the relative week number:

// Create a date object based on year and week number
// https://stackoverflow.com/a/19375264/1287812
function firstDayOfWeek( year, week ) {
  // Jan 1 of 'year'
  var d = new Date(year, 0, 1),
    offset = d.getTimezoneOffset();

  // ISO: week 1 is the one with the year's first Thursday 
  // so nearest Thursday: current date + 4 - current day number
  // Sunday is converted from 0 to 7
  d.setDate(d.getDate() + 4 - (d.getDay() || 7));

  // 7 days * (week - overlapping first week)
  d.setTime(d.getTime() + 7 * 24 * 60 * 60 * 1000 * (week + (year == d.getFullYear() ? -1 : 0)));

  // daylight savings fix
  d.setTime(d.getTime() + (d.getTimezoneOffset() - offset) * 60 * 1000);

  // back to Monday (from Thursday)
  d.setDate(d.getDate() - 3);

  return d;
}

$('#mycalendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month agendaWeek agendaDay'
  },
  weekNumbers: true,
  dayClick: function(date, jsEvent, view) {
    var gotoweek = firstDayOfWeek( date.year(), date.weeks() );
    $('#mycalendar').fullCalendar( 'gotoDate', gotoweek );
    $('#mycalendar').fullCalendar( 'changeView', 'agendaWeek' );
  },
  events: [{
    title: 'Click me 1',
    msg: 'I am clipped to the left which is annoying',
    start: '2014-09-01 06:00:00',
    end: '2014-09-01 08:00:00',
    editable: false,
    allDay: false
  }, {
    title: 'Click me 2',
    msg: 'I am OK',
    start: '2014-09-04 14:00:00',
    end: '2014-09-04 15:00:00',
    editable: false,
    allDay: false
  }]
});

#mycalendar {
  margin: 30px;
  height: 500px;
  max-width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css">
<div id="mycalendar"></div>

Jump to/show specific week in calendar by using week number

1 Answers1