Skip to content

Calendar: Add working year / month select demo #1803

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

Merged
merged 4 commits into from
May 17, 2017
Merged

Calendar: Add working year / month select demo #1803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c1cb6e3
Calendar: Use widget extension to render year and month select
fnagel Apr 11, 2017
5ee64dd
Calendar: Introduce build methods for year and month title
fnagel Apr 12, 2017
9bb209c
Calendar: Introduce getter / setter for date and viewDate
fnagel Apr 12, 2017
d6de67a
Calendar: Introduce getter / setter for grid id
fnagel Apr 12, 2017
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
65 changes: 61 additions & 4 deletions demos/calendar/dropdown-month-year.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,75 @@
<link rel="stylesheet" href="../demos.css">
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#calendar" ).calendar({
changeMonth: true,
changeYear: true
$.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. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>
<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.</p>
</div>
</body>
</html>
Loading