Scrollable jQuery Week Picker And Calendar Plugin - scrollableCalendar

scrollableCalendar is a simple, fast jQuery plugin used to create a smoothly scrollable calendar for easier week selection.

Features:

• Allows date selection by week.
• Displays an indicator after selection.
• Auto saves week selection in local storage.
• Custom start/end dates.
• Mobile touch friendly.
• Callbacks functions.

Basic usage:

1. Add jQuery library together with the jQuery scrollableCalendar plugin's files into your webpage.

<link rel="stylesheet" href="css/Calendar.css">
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="js/jquery.calendar.js"></script>
<script src="js/WeekHistory.js"></script>

2. Create an empty DIV element which will be served as the container for your week picker.

<div id="calendar-container"></div>

3. Call the function to generate a calendar / week picker inside the DIV container.

$("#calendar-container").scrollableCalendar();

4. Config the plugin. Here's a list of default configuration options you can pass to the plugin during initialization.

$("#calendar-container").scrollableCalendar({

  // star date
  startDate: "2012-01-01",

  // end date
  endDate: "2022-01-22",

  // "latest-week" or a date
  currentWeek: "latest-week",

  // default is 0 for Sunday - can be from 0 to 6 (I'm using zero based as that's how Date.getDay() works)
  startDay: 0, 

  // highlights the current week
  highlight: true,

  // array of true/false for week status
  readWeeks: [],

  // for different languages
  dayNames: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
  monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],

  // title of the calendar
  calendarTitle: "",

  // if true, calendar row heights are the touchRowHeight
  touch: false,

  // Heights are in pixels
  thumbHeight: 45, 
  touchRowHeight: 48,
  nonTouchRowHeight: 29,

  // callback
  onClick: function () { 
    window.alert(this); 
  },

  // The final values for rowHeight & rowCount are set programably - any presets or options values are ignored
  // This value is set in validateSettings function (any value passed in is ignored)
  rowHeight: 29, 
  // This value is set in the init function (any value passed in is ignored)
  rowCount: 0 
  
});

Changelog:

2019-05-11

• Compatible with jQuery 3.4+

2019-02-03

• Add option to set the week-start day

2018-07-29

• Fix mobile track size & modify touch detection

---

This awesome jQuery plugin is developed by RichDeBourke. For more Advanced Usages, please check the demo page or visit the official website.