aboutsummaryrefslogtreecommitdiffstats
path: root/demos/calendar
diff options
context:
space:
mode:
Diffstat (limited to 'demos/calendar')
-rw-r--r--demos/calendar/buttonbar.html28
-rw-r--r--demos/calendar/default.html22
-rw-r--r--demos/calendar/dropdown-month-year.html82
-rw-r--r--demos/calendar/index.html22
-rw-r--r--demos/calendar/localization.html41
-rw-r--r--demos/calendar/min-max.html33
-rw-r--r--demos/calendar/multiple-months.html24
-rw-r--r--demos/calendar/other-months.html31
-rw-r--r--demos/calendar/show-week.html26
9 files changed, 309 insertions, 0 deletions
diff --git a/demos/calendar/buttonbar.html b/demos/calendar/buttonbar.html
new file mode 100644
index 000000000..28ee693cc
--- /dev/null
+++ b/demos/calendar/buttonbar.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery UI Calendar - Display button bar</title>
+ <link rel="stylesheet" href="../../themes/base/all.css">
+ <link rel="stylesheet" href="../demos.css">
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
+ $( "#calendar" ).calendar({
+ buttons: {
+ Today: function() {
+ $( this ).calendar( "valueAsDate", new Date() );
+ }
+ }
+ });
+ </script>
+</head>
+<body>
+
+<div id="calendar"></div>
+
+<div class="demo-description">
+<p>Display a button for selecting Today's date with the <code>buttons</code> option.</p>
+</div>
+</body>
+</html>
diff --git a/demos/calendar/default.html b/demos/calendar/default.html
new file mode 100644
index 000000000..1a2cfdf77
--- /dev/null
+++ b/demos/calendar/default.html
@@ -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 - Default functionality</title>
+ <link rel="stylesheet" href="../../themes/base/all.css">
+ <link rel="stylesheet" href="../demos.css">
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
+ $( "#calendar" ).calendar();
+ </script>
+</head>
+<body>
+
+<div id="calendar"></div>
+
+<div class="demo-description">
+<p>The calendar is a widget for selecting a date using a visual calendar representation.</p>
+</div>
+</body>
+</html>
diff --git a/demos/calendar/dropdown-month-year.html b/demos/calendar/dropdown-month-year.html
new file mode 100644
index 000000000..e305e879a
--- /dev/null
+++ b/demos/calendar/dropdown-month-year.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery UI Calendar - Display month &amp; year menus</title>
+ <link rel="stylesheet" href="../../themes/base/all.css">
+ <link rel="stylesheet" href="../demos.css">
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
+ $.widget( "ui.calendar", $.ui.calendar, {
+ _buildTitleMonth: function() {
+ var select = $( "<select>" ),
+ date = this._getDate().clone(),
+ i = 0,
+ option;
+
+ this._on( select, {
+ change: function() {
+ this._off( select );
+ this._getDate().setFullDate(
+ this._getDate().year(),
+ select.val(),
+ this._getDate().day()
+ );
+ this._updateView();
+ }
+ } );
+
+ for ( ; i < 12; i++ ) {
+ date.setFullDate( select.val(), i, this._getDate().day() );
+ option = $( "<option>", { val: i, text: date.monthName() } );
+ if ( this._getDate().month() === i ) {
+ option.prop( "selected", true );
+ }
+ select.append( option );
+ }
+
+ return select;
+ },
+ _buildTitleYear: function() {
+ var current = new Date(),
+ select = $( "<select>" ),
+ i = current.getFullYear(),
+ option;
+
+ this._on( select, {
+ change: function() {
+ this._off( select );
+ this._getDate().setFullDate(
+ select.val(),
+ this._getDate().month(),
+ this._getDate().day()
+ );
+ this._updateView();
+ }
+ } );
+
+ for ( ;i <= current.getFullYear() + 10; i++ ) {
+ option = $( "<option>", { val: i, text: i } );
+ if ( this._getDate().year() === i ) {
+ option.prop( "selected", true );
+ }
+ select.append( option );
+ }
+
+ return select;
+ }
+ });
+
+ $( "#calendar" ).calendar();
+ </script>
+</head>
+<body>
+
+<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.</p>
+</div>
+</body>
+</html>
diff --git a/demos/calendar/index.html b/demos/calendar/index.html
new file mode 100644
index 000000000..751301a00
--- /dev/null
+++ b/demos/calendar/index.html
@@ -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>
diff --git a/demos/calendar/localization.html b/demos/calendar/localization.html
new file mode 100644
index 000000000..2c2cc2310
--- /dev/null
+++ b/demos/calendar/localization.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery UI Calendar - Localize calendar</title>
+ <link rel="stylesheet" href="../../themes/base/all.css">
+ <link rel="stylesheet" href="../demos.css">
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
+ var calendar = $( "#calendar" ),
+ select = $( "#locale" );
+
+ calendar.calendar({
+ locale: select.val()
+ });
+
+ select.change( function() {
+ calendar.calendar( "option", {
+ locale: select.val()
+ });
+ calendar.calendar( "valueAsDate", calendar.calendar( "valueAsDate" ) );
+ });
+ </script>
+</head>
+<body>
+
+<div id="calendar"></div>
+<select id="locale">
+ <option value="ar">Arabic</option>
+ <option value="de" selected>German</option>
+ <option value="en">English</option>
+ <option value="es">Spanish</option>
+ <option value="zh">Chinese Simplified</option>
+</select>
+
+<div class="demo-description">
+<p>Localize the 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>
diff --git a/demos/calendar/min-max.html b/demos/calendar/min-max.html
new file mode 100644
index 000000000..b3036b873
--- /dev/null
+++ b/demos/calendar/min-max.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Calendar - Restrict date range</title>
+ <link rel="stylesheet" href="../../themes/base/all.css">
+ <link rel="stylesheet" href="../demos.css">
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
+ var now = new Date(),
+ dateMin = new Date( now.getFullYear(), now.getMonth(), now.getDate() + 1 ),
+ dateMax = new Date( now.getFullYear(), now.getMonth(), now.getDate() + 8 );
+
+ dateMin = new Date( 2008, 2 - 1, 29 );
+ dateMax = new Date( 2008, 12 - 1, 7 );
+
+
+ $( "#calendar" ).calendar({
+ min: dateMin,
+ max: dateMax,
+ value: new Date( 2008, 1 - 1, 4 )
+ });
+ </script>
+</head>
+<body>
+
+<div id="calendar"></div>
+
+<div class="demo-description">
+<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 (<code>new Date(2009, 1 - 1, 26)</code>).</p>
+</div>
+</body>
+</html>
diff --git a/demos/calendar/multiple-months.html b/demos/calendar/multiple-months.html
new file mode 100644
index 000000000..f83da1f82
--- /dev/null
+++ b/demos/calendar/multiple-months.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery UI Calendar - Display multiple months</title>
+ <link rel="stylesheet" href="../../themes/base/all.css">
+ <link rel="stylesheet" href="../demos.css">
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
+ $( "#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>
diff --git a/demos/calendar/other-months.html b/demos/calendar/other-months.html
new file mode 100644
index 000000000..2fb4dacf8
--- /dev/null
+++ b/demos/calendar/other-months.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery UI Calendar - Dates in other months</title>
+ <link rel="stylesheet" href="../../themes/base/all.css">
+ <link rel="stylesheet" href="../demos.css">
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
+ $( "#calendar" ).calendar({
+ eachDay: function( day ) {
+ if ( day.lead ) {
+ day.render = true;
+ day.selectable = true;
+ day.extraClasses = "ui-priority-secondary";
+ }
+ }
+ });
+ </script>
+</head>
+<body>
+
+<div id="calendar"></div>
+
+<div class="demo-description">
+<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>
+</html>
diff --git a/demos/calendar/show-week.html b/demos/calendar/show-week.html
new file mode 100644
index 000000000..e148b6570
--- /dev/null
+++ b/demos/calendar/show-week.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery UI Calendar - Show week of the year</title>
+ <link rel="stylesheet" href="../../themes/base/all.css">
+ <link rel="stylesheet" href="../demos.css">
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
+ $( "#calendar" ).calendar({
+ showWeek: true
+ });
+ </script>
+</head>
+<body>
+
+<div id="calendar"></div>
+
+<div class="demo-description">
+<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>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-03 21:42:31 +0000