Skip to content

Calendar rebase #1316

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 26 commits into from
Closed

Calendar rebase #1316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
0f431a6
Datepicker: Introduce value option
fnagel May 15, 2014
6d393ea
Calendar: Add calendar widget
fnagel Jun 3, 2014
2925e71
Calendar: Add min and max option.
fnagel Jun 4, 2014
69736ca
Calendar: Remove select callback reference
fnagel Jun 4, 2014
a6bc8b9
Datepicker: Code clean up for events
fnagel Jun 5, 2014
b7f5d13
Datepicker: Remove unwanted keyboard shortcut
fnagel Jun 5, 2014
6fc0e99
Datepicker: Simplify usage of calendar options and avoid duplications
fnagel Jun 12, 2014
d8cff5e
Datepicker tests: Add open and close unit tests
fnagel Jun 16, 2014
03a26ff
Datepicker: Improve document click event
fnagel Jun 17, 2014
d443def
Calendar: Fix broken day table cell attributes
fnagel Jun 17, 2014
1c33a3a
Datepicker tests: Rewrite event unit tests
fnagel Jun 17, 2014
57d86fc
Calendar: Fix multiple calendar styles
fnagel Jun 17, 2014
6e57cdd
Calendar: Fix German localization
fnagel Jun 17, 2014
f980cb8
Datepicker: Fix localization demo
fnagel Jun 18, 2014
a66a8c5
Datepicker: Several minor code improvements
fnagel Jun 18, 2014
e32c4a7
Calendar: Fix hover event setting and removing
fnagel Jun 18, 2014
34c1a32
Calendar: Improve code style and clean up
fnagel Jun 19, 2014
c649c85
Calendar: Focus class is not removed when using arrow keys
fnagel Jun 19, 2014
c34f013
Datepicker: Remove unwanted CTRL+HOME shortcut
fnagel Jun 19, 2014
5182ba5
Datepicker: Remove support for enter key on input
fnagel Jun 19, 2014
338baee
Datepicker: Improve localization handling, code style
fnagel Jun 19, 2014
a7412cf
Calendar: Add buttons option
fnagel Jun 19, 2014
9cba180
Calendar: Adjust files to match reorganization of external directory
fnagel Jul 2, 2014
fde83f2
Datepicker tests: Remove pass-through options unit tests
fnagel Aug 29, 2014
6a1e8bc
Calendar: Use _on for link hover events
fnagel Aug 30, 2014
5a6596d
Datepicker: Add missing handling for disabled option
fnagel Sep 1, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ var
"core",
"accordion",
"autocomplete",
"calendar",
"button",
"datepicker",
"dialog",
Expand Down
1 change: 1 addition & 0 deletions build/tasks/testswarm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
16 changes: 10 additions & 6 deletions demos/datepicker/buttonbar.html → demos/calendar/buttonbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -11,23 +11,27 @@
<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({
showButtonPanel: true
$( "#calendar" ).calendar({
buttons: {
"Today": function() {
$( this ).calendar( "valueAsDate", new Date() );
}
}
});
});
</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>
<p>Display a button for selecting Today's date with the <code>buttons</code> option.</p>
</div>
</body>
</html>
10 changes: 5 additions & 5 deletions demos/datepicker/inline.html → demos/calendar/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
8 changes: 4 additions & 4 deletions demos/datepicker/dropdown-month-year.html → demos/calendar/dropdown-month-year.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
});
Expand All @@ -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>
Expand Down
22 changes: 22 additions & 0 deletions demos/calendar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
44 changes: 44 additions & 0 deletions demos/calendar/localization.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!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() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like the other localization demo this needs to initialize the German locale.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've noticed oth localization demos do not initialize with German locale. Problem is that Globalize is not configured on init but on select change. The selected option is German, so we need either change the selected option or init Globalize on init.

Is that what you noticed?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep exactly. I'm fine with either approach, but we need to do one of those.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've decided to init Globalize on init as just changing the selected option won't help when using refresh after selecting another option.

var calendar = $( "#calendar" ),
select = $( "#locale" );

Globalize.locale( select.val() );
calendar.calendar();

select.change( function() {
Globalize.locale( $( this ).val() );
calendar.calendar( "valueAsDate", calendar.calendar( "valueAsDate" ) );
});
});
</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>
</div>
</body>
</html>
17 changes: 12 additions & 5 deletions demos/datepicker/min-max.html → demos/calendar/min-max.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -11,21 +11,28 @@
<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" });
var now = new Date(),
dateMin = new Date( now.getFullYear(), now.getMonth(), now.getDay() + 1 ),
dateMax = new Date( now.getFullYear(), now.getMonth(), now.getDay() + 8 );

$( "#calendar" ).calendar({
min: dateMin,
max: dateMax
});
});
</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>
<p>Restrict the range of selectable dates with the <code>min</code> and <code>max</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)).</p>
</div>
</body>
</html>
10 changes: 5 additions & 5 deletions demos/datepicker/multiple-calendars.html → demos/calendar/multiple-calendars.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
});
Expand All @@ -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>
33 changes: 33 additions & 0 deletions demos/calendar/multiple-months.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 5 additions & 5 deletions demos/datepicker/other-months.html → demos/calendar/other-months.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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;
Expand All @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions demos/datepicker/show-week.html → demos/calendar/show-week.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions demos/datepicker/alt-field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" } ) );
}
});
Expand Down
Loading