Skip to content
Permalink
Browse files

Calendar: Add calendar widget

Add calendar widget by copying and renaming datepicker widget files.
Remove datepicker functionality, options and methods from Calendar.
Remove calendar functionality, options and methods from Datepicker.
Adjust tests due to split and changed specification. Remove duplicated
demo files and fix some demos. Simplify calendar generation, use CSS
instead of inline styles. Fix destroy method. Make use of uniqueId
method. Fix focus highlighting when month is changed. Add version
property. Add common unit tests. Fix input keyboard handling.
  • Loading branch information
fnagel committed Jun 3, 2014
1 parent 0f431a6 commit 6d393eae7c8afa2a885630dc5dc5e8ffe5980f0a
Showing with 2,039 additions and 2,276 deletions.
  1. +1 −0 Gruntfile.js
  2. +1 −0 build/tasks/testswarm.js
  3. +4 −4 demos/{datepicker → calendar}/buttonbar.html
  4. +5 −5 demos/{datepicker/inline.html → calendar/default.html}
  5. +4 −4 demos/{datepicker → calendar}/dropdown-month-year.html
  6. +22 −0 demos/calendar/index.html
  7. +41 −0 demos/calendar/localization.html
  8. +4 −4 demos/{datepicker → calendar}/min-max.html
  9. +5 −5 demos/{datepicker → calendar}/multiple-calendars.html
  10. +33 −0 demos/calendar/multiple-months.html
  11. +5 −5 demos/{datepicker → calendar}/other-months.html
  12. +5 −5 demos/{datepicker → calendar}/show-week.html
  13. +3 −2 demos/datepicker/alt-field.html
  14. +1 −0 demos/datepicker/animation.html
  15. +10 −16 demos/datepicker/date-formats.html
  16. +0 −49 demos/datepicker/date-range.html
  17. +1 −0 demos/datepicker/default.html
  18. +1 −0 demos/datepicker/icon-trigger.html
  19. +3 −11 demos/datepicker/index.html
  20. +1 −0 demos/datepicker/localization.html
  21. +1 −0 demos/index.html
  22. +1 −0 tests/unit/all.html
  23. +26 −0 tests/unit/calendar/all.html
  24. +46 −0 tests/unit/calendar/calendar.html
  25. +14 −0 tests/unit/calendar/calendar_common.js
  26. +370 −0 tests/unit/calendar/calendar_core.js
  27. +150 −0 tests/unit/calendar/calendar_events.js
  28. +78 −0 tests/unit/calendar/calendar_methods.js
  29. +351 −0 tests/unit/calendar/calendar_options.js
  30. +22 −0 tests/unit/calendar/calendar_test_helpers.js
  31. +2 −3 tests/unit/datepicker/datepicker.html
  32. +19 −3 tests/unit/datepicker/datepicker_common.js
  33. +43 −363 tests/unit/datepicker/datepicker_core.js
  34. +9 −20 tests/unit/datepicker/datepicker_methods.js
  35. +20 −1,109 tests/unit/datepicker/datepicker_options.js
  36. +1 −1 tests/unit/datepicker/datepicker_test_helpers.js
  37. +1 −0 tests/unit/index.html
  38. +1 −0 themes/base/base.css
  39. +178 −0 themes/base/calendar.css
  40. +3 −169 themes/base/datepicker.css
  41. +481 −0 ui/calendar.js
  42. +72 −498 ui/datepicker.js
@@ -28,6 +28,7 @@ var
"core",
"accordion",
"autocomplete",
"calendar",
"button",
"datepicker",
"dialog",
@@ -14,6 +14,7 @@ var versions = {
"Accordion": "accordion/accordion.html",
"Autocomplete": "autocomplete/autocomplete.html",
"Button": "button/button.html",
"Calendar": "calendar/calendar.html",
"Core": "core/core.html",
"Core_deprecated": "core/core_deprecated.html",
"Datepicker": "datepicker/datepicker.html",
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display button bar</title>
<title>jQuery UI Calendar - Display button bar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
@@ -11,20 +11,20 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
$( "#calendar" ).calendar({
showButtonPanel: true
});
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>
<div id="calendar"></div>

<div class="demo-description">
<p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.</p>
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display inline</title>
<title>jQuery UI Calendar - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
@@ -11,21 +11,21 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#calendar" ).calendar();
});
</script>
</head>
<body>

Date: <div id="datepicker"></div>
<div id="calendar"></div>

<div class="demo-description">
<p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p>
<p>The calendar is a widget for selecting a date using a visual calendar representation.</p>
</div>
</body>
</html>
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display month &amp; year menus</title>
<title>jQuery UI Calendar - Display month &amp; year menus</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
@@ -11,12 +11,12 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
$( "#calendar" ).calendar({
changeMonth: true,
changeYear: true
});
@@ -25,7 +25,7 @@
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>
<div id="calendar"></div>

<div class="demo-description">
<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>
@@ -0,0 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Calendar Demos</title>
</head>
<body>

<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="buttonbar.html">Display button bar</a></li>
<li><a href="dropdown-month-year.html">Display month &amp; year menus</a></li>
<li><a href="localization.html">Localize calendar</a></li>
<li><a href="min-max.html">Restrict date range</a></li>
<li><a href="multiple-months.html">Display multiple months</a></li>
<li><a href="other-months.html">Dates in other months</a></li>
<li><a href="show-week.html">Show week of the year</a></li>
</ul>

</body>
</html>

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Sep 25, 2014

Collaborator

Missing newline.

This comment has been minimized.

Copy link
@fnagel

fnagel Sep 29, 2014

Author Owner

Fixed.

@@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Calendar - Localize calendar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
var calendar = $( "#calendar" ).calendar(),
date = calendar.calendar( "valueAsDate" );

$( "#locale" ).change(function() {
Globalize.locale( $(this).val() );

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Sep 25, 2014

Collaborator

spacing

This comment has been minimized.

Copy link
@fnagel

fnagel Sep 29, 2014

Author Owner

Fixed.

calendar.calendar( "valueAsDate", date );
});
});
</script>
</head>
<body>

<div id="calendar"></div>
<select id="locale">
<option value="de-DE" selected>German (Deutsch)</option>
<option value="en">English</option>
</select>

<div class="demo-description">
<p>Localize the calendar calendar language and format (English / Western formatting is the default). The calendar includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p>

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Sep 25, 2014

Collaborator

Single space between sentences.

This comment has been minimized.

Copy link
@fnagel

fnagel Sep 29, 2014

Author Owner

Fixed.

</div>
</body>
</html>
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Restrict date range</title>
<title>jQuery UI Calendar - Restrict date range</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
@@ -11,18 +11,18 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
$( "#calendar" ).calendar({ minDate: -20, maxDate: "+1M +10D" });
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>
<div id="calendar"></div>

<div class="demo-description">
<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p>
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display multiple months</title>
<title>jQuery UI Calendar - Display multiple months</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
@@ -11,12 +11,12 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
$( "#calendar" ).calendar({
numberOfMonths: 3,
showButtonPanel: true
});
@@ -25,10 +25,10 @@
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>
<div id="calendar"></div>

<div class="demo-description">
<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p>
<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single calendar.</p>
</div>
</body>
</html>
@@ -0,0 +1,33 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Calendar - Display multiple months</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#calendar" ).calendar({
numberOfMonths: 3
});
});
</script>
</head>
<body>

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

<div class="demo-description">
<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single calendar.</p>
</div>
</body>
</html>
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Dates in other months</title>
<title>jQuery UI Calendar - Dates in other months</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
@@ -11,12 +11,12 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
$( "#calendar" ).calendar({
eachDay: function( day ) {
if ( day.lead ) {
day.render = true;
@@ -30,10 +30,10 @@
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>
<div id="calendar"></div>

<div class="demo-description">
<p>The datepicker can show dates that come from other than the main month
<p>The calendar can show dates that come from other than the main month
being displayed. These other dates can also be made selectable.</p>
</div>
</body>
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Show week of the year</title>
<title>jQuery UI Calendar - Show week of the year</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
@@ -11,23 +11,23 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
$( "#calendar" ).calendar({
showWeek: true
});
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>
<div id="calendar"></div>

<div class="demo-description">
<p>The datepicker can show the week of the year. The calculation follows
<p>The calendar can show the week of the year. The calculation follows
<a href="http://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table">Unicode CLDR specification</a>.
This means that some days from one year may be placed into weeks 'belonging' to another year.</p>
</div>
@@ -11,14 +11,15 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
select: function( event, ui ) {
var date = Globalize.parseDate( ui.date, { date: "short" } );
select: function( event ) {
var date = $( "#datepicker" ).datepicker( "valueAsDate" );
$( "#alternate" ).val( Globalize.format( date, { date: "long" } ) );
}
});
@@ -18,6 +18,7 @@
<script src="../../ui/effect-fold.js"></script>
<script src="../../ui/effect-slide.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">

0 comments on commit 6d393ea

Please sign in to comment.
You can’t perform that action at this time.