| Şuanki Dizin: /home/wwwdreamtechnolo/public_html/swamipolytechnic.org/cal/pg-calendar-master/ |
| Şuanki Dosya : /home/wwwdreamtechnolo/public_html/swamipolytechnic.org/cal/pg-calendar-master/index.html |
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta property="og:url" content="http://www.pigno.se/barn/PIGNOSE-Calendar">
<meta property="og:type" content="product" />
<meta property="og:title" content="PIGNOSE Calendar" />
<meta property="og:description" content="PIGNOSE Calendar is beautiful and eidetic jQuery date picker plguin." />
<meta property="og:image" content="http://www.pigno.se/barn/PIGNOSE-Calendar/demo/img/cover@250.png" />
<meta property="og:site_name" content="PIGNOSE" />
<title>PIGNOSE Calendar</title>
<link rel="shortcut icon" type="image/x-icon" href="demo/img/pignose-ico.ico" />
<link rel="stylesheet" type="text/css" href="demo/css/semantic.ui.min.css">
<link rel="stylesheet" type="text/css" href="demo/css/prism.css" />
<link rel="stylesheet" type="text/css" href="demo/css/calendar-style.css" />
<link rel="stylesheet" type="text/css" href="demo/css/style.css" />
<link rel="stylesheet" type="text/css" href="dist/css/pignose.calendar.css" />
<style type="text/css">
.input-calendar {
display: block;
width: 100%;
max-width: 360px;
margin: 0 auto;
height: 3.2em;
line-height: 3.2em;
font: inherit;
padding: 0 1.2em;
border: 1px solid #d8d8d8;
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
-o-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.btn-calendar {
display: block;
width: 100%;
max-width: 360px;
height: 3.2em;
line-height: 3.2em;
background-color: #52555a;
margin: 0 auto;
font-weight: 600;
color: #ffffff !important;
text-decoration: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
-o-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.btn-calendar:hover {
background-color: #5a6268;
}
</style>
<script type="text/javascript" src="demo/js/jquery.latest.min.js"></script>
<script type="text/javascript" src="demo/js/moment.latest.min.js"></script>
<script type="text/javascript" src="demo/js/semantic.ui.min.js"></script>
<script type="text/javascript" src="demo/js/prism.min.js"></script>
<script type="text/javascript" src="dist/js/pignose.calendar.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
$('#wrapper .version strong').text('v' + $.fn.pignoseCalendar.ComponentVersion);
function onSelectHandler(date, context) {
/**
* @date is an array which be included dates(clicked date at first index)
* @context is an object which stored calendar interal data.
* @context.calendar is a root element reference.
* @context.calendar is a calendar element reference.
* @context.storage.activeDates is all toggled data, If you use toggle type calendar.
* @context.storage.events is all events associated to this date
*/
var $element = context.element;
var $calendar = context.calendar;
var $box = $element.siblings('.box').show();
var text = 'You choose date ';
if (date[0] !== null) {
text += date[0].format('YYYY-MM-DD');
}
if (date[0] !== null && date[1] !== null) {
text += ' ~ ';
}
else if (date[0] === null && date[1] == null) {
text += 'nothing';
}
if (date[1] !== null) {
text += date[1].format('YYYY-MM-DD');
}
$box.text(text);
}
function onApplyHandler(date, context) {
/**
* @date is an array which be included dates(clicked date at first index)
* @context is an object which stored calendar interal data.
* @context.calendar is a root element reference.
* @context.calendar is a calendar element reference.
* @context.storage.activeDates is all toggled data, If you use toggle type calendar.
* @context.storage.events is all events associated to this date
*/
var $element = context.element;
var $calendar = context.calendar;
var $box = $element.siblings('.box').show();
var text = 'You applied date ';
if (date[0] !== null) {
text += date[0].format('YYYY-MM-DD');
}
if (date[0] !== null && date[1] !== null) {
text += ' ~ ';
}
else if (date[0] === null && date[1] == null) {
text += 'nothing';
}
if (date[1] !== null) {
text += date[1].format('YYYY-MM-DD');
}
$box.text(text);
}
// Default Calendar
$('.calendar').pignoseCalendar({
select: onSelectHandler
});
// Input Calendar
$('.input-calendar').pignoseCalendar({
select: onSelectHandler,
buttons: true, // It means you can give bottom button controller to the modal which be opened when you click.
});
// Calendar modal
var $btn = $('.btn-calendar').pignoseCalendar({
select: onSelectHandler,
apply: onApplyHandler,
modal: true, // It means modal will be showed when you click the target button.
buttons: true
});
// Color theme type Calendar
$('.calendar-dark').pignoseCalendar({
theme: 'dark', // light, dark, blue
select: onSelectHandler
});
// Blue theme type Calendar
$('.calendar-blue').pignoseCalendar({
theme: 'blue', // light, dark, blue
select: onSelectHandler
});
// Schedule Calendar
$('.calendar-schedules').pignoseCalendar({
scheduleOptions: {
colors: {
holiday: '#2fabb7',
seminar: '#5c6270',
meetup: '#ef8080'
}
},
schedules: [{
name: 'holiday',
date: '2017-08-08'
}, {
name: 'holiday',
date: '2017-09-16'
}, {
name: 'holiday',
date: '2017-10-01',
}, {
name: 'holiday',
date: '2017-10-05'
}, {
name: 'holiday',
date: '2017-10-18',
}, {
name: 'seminar',
date: '2017-11-14'
}, {
name: 'seminar',
date: '2017-12-01',
}, {
name: 'meetup',
date: '2018-01-16'
}, {
name: 'meetup',
date: '2018-02-01',
}, {
name: 'meetup',
date: '2018-02-18'
}, {
name: 'meetup',
date: '2018-03-04',
}, {
name: 'meetup',
date: '2018-04-01'
}, {
name: 'meetup',
date: '2018-04-19',
}],
select: function (date, context) {
var message = `You selected ${(date[0] === null ? 'null' : date[0].format('YYYY-MM-DD'))}.
<br />
<br />
<strong>Events for this date</strong>
<br />
<br />
<div class="schedules-date"></div>`;
var $target = context.calendar.parent().next().show().html(message);
for (var idx in context.storage.schedules) {
var schedule = context.storage.schedules[idx];
if (typeof schedule !== 'object') {
continue;
}
$target.find('.schedules-date').append('<span class="ui label default">' + schedule.name + '</span>');
}
}
});
// Multiple picker type Calendar
$('.multi-select-calendar').pignoseCalendar({
multiple: true,
select: onSelectHandler
});
// Toggle type Calendar
$('.toggle-calendar').pignoseCalendar({
toggle: true,
select: function (date, context) {
var message = `You selected ${(date[0] === null ? 'null' : date[0].format('YYYY-MM-DD'))}.
<br />
<br />
<strong>Events for this date</strong>
<br />
<br />
<div class="active-dates"></div>`;
var $target = context.calendar.parent().next().show().html(message);
for (var idx in context.storage.activeDates) {
var date = context.storage.activeDates[idx];
if (typeof date !== 'string') {
continue;
}
$target.find('.active-dates').append('<span class="ui label default">' + date + '</span>');
}
}
});
// Disabled date settings.
(function () {
// IIFE Closure
var times = 30;
var disabledDates = [];
for (var i = 0; i < times; /* Do not increase index */) {
var year = moment().year();
var month = 0;
var day = parseInt(Math.random() * 364 + 1);
var date = moment().year(year).month(month).date(day).format('YYYY-MM-DD');
if ($.inArray(date, disabledDates) === -1) {
disabledDates.push(date);
i++;
}
}
disabledDates.sort();
var $dates = $('.disabled-dates-calendar').siblings('.guide').find('.guide-dates');
for (var idx in disabledDates) {
$dates.append('<span>' + disabledDates[idx] + '</span>');
}
$('.disabled-dates-calendar').pignoseCalendar({
select: onSelectHandler,
disabledDates: disabledDates
});
}());
// Disabled Weekdays Calendar.
$('.disabled-weekdays-calendar').pignoseCalendar({
select: onSelectHandler,
disabledWeekdays: [0, 6]
});
// Disabled Range Calendar.
var minDate = moment().set('dates', Math.min(moment().day(), 2 + 1)).format('YYYY-MM-DD');
var maxDate = moment().set('dates', Math.max(moment().day(), 24 + 1)).format('YYYY-MM-DD');
$('.disabled-range-calendar').pignoseCalendar({
select: onSelectHandler,
minDate: minDate,
maxDate: maxDate
});
// Multiple Week Select
$('.pick-weeks-calendar').pignoseCalendar({
pickWeeks: true,
multiple: true,
select: onSelectHandler
});
// Disabled Ranges Calendar.
$('.disabled-ranges-calendar').pignoseCalendar({
select: onSelectHandler,
disabledRanges: [
['2016-10-05', '2016-10-21'],
['2016-11-01', '2016-11-07'],
['2016-11-19', '2016-11-21'],
['2016-12-05', '2016-12-08'],
['2016-12-17', '2016-12-18'],
['2016-12-29', '2016-12-30'],
['2017-01-10', '2017-01-20'],
['2017-02-10', '2017-04-11'],
['2017-07-04', '2017-07-09'],
['2017-12-01', '2017-12-25'],
['2018-02-10', '2018-02-26'],
['2018-05-10', '2018-09-17'],
]
});
// I18N Calendar
$('.language-calendar').each(function () {
var $this = $(this);
var lang = $this.data('lang');
$this.pignoseCalendar({
lang: lang
});
});
// This use for DEMO page tab component.
$('.menu .item').tab();
});
//]]>
</script>
</head>
<body>
<div id="wrapper">
<div class="header">
<img src="demo/img/pignose-logo.png" alt="" />
<h1>PIGNOSE Calendar</h1>
<a href="https://github.com/KennethanCeyer/PIGNOSE-Calendar" target="_blank" class="ui button primary">View project on Github</a>
<a href="https://github.com/KennethanCeyer/pg-calendar/wiki/Documentation" target="_blank" class="ui button blue">Documentation</a>
<a href="https://github.com/KennethanCeyer/PIGNOSE-Calendar/archive/master.zip" target="_blank" class="ui button teal">Download</a>
<h4 class="version">Latest version <strong></strong></h4>
</div>
<div id="basic" class="article">
<h3><span>Calendar</span></h3>
<h4>PIGNOSE Calendar is beautiful and eidetic jQuery date picker plguin.</h4>
<div class="calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-basic">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-basic">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-basic">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-basic">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar();
});</code></pre>
</div>
</div>
<div id="input" class="article">
<h3><span>Input type</span></h3>
<h4>You can use calendar by input power ups.</h4>
<input type="text" class="input-calendar" />
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-input">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-input">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-input">
<pre><code class="language-markup"><input type="text" id="text-calendar" class="calendar" /></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-input">
<pre><code class="language-js">$(function() {
$('input.calendar').pignoseCalendar({
format: 'YYYY-MM-DD' // date format string. (2017-02-02)
});
});</code></pre>
</div>
</div>
<div id="modal" class="article">
<h3><span>Modal</span></h3>
<h4>You can display calendar by modal popup.</h4>
<a href="#" class="btn-calendar">Open Modal</a>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-modal">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-modal">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-modal">
<pre><code class="language-markup"><a href="#" class="calendar"></a></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-modal">
<pre><code class="language-js">$(function() {
$('a.calendar').pignoseCalendar({
format: 'YYYY-MM-DD' // date format string. (2017-02-02)
});
});</code></pre>
</div>
</div>
<div id="theme-dark" class="article">
<h3><span>Dark theme support</span></h3>
<h4>Dark theme type supports, And we have a plan to add other themes.</h4>
<div class="calendar-dark"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-dark-theme">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-dark-theme">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-dark-theme">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-dark-theme">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
theme: 'dark' // light, dark, blue
});
});</code></pre>
</div>
</div>
<div id="theme-blue" class="article">
<h3><span>Blue theme support</span></h3>
<div class="calendar-blue"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-blue-theme">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-blue-theme">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-blue-theme">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-blue-theme">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
theme: 'blue' // light, dark, blue
});
});</code></pre>
</div>
</div>
<div id="schedules" class="article">
<h3><span>Schedule Calendar</span></h3>
<div class="calendar-schedules"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-schedules">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-schedules">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-schedules">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-schedules">
<pre><code class="language-js">$('.calendar').pignoseCalendar({
scheduleOptions: {
colors: {
offer: '#2fabb7',
ad: '#5c6270'
}
},
schedules: [{
name: 'offer',
date: '2017-02-08'
}, {
name: 'ad',
date: '2017-02-08'
}, {
name: 'offer',
date: '2017-02-05',
}],
select: function(date, context) {
console.log('events for this date', context.storage.schedules);
}
});</code></pre>
</div>
</div>
<div id="multiple" class="article">
<h3><span>Multiple range Calendar</span></h3>
<h4>PIGNOSE Calendar supports multiple range picker.</h4>
<div class="multi-select-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-multiple">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-multiple">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-multiple">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-multiple">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
multiple: true
});
});</code></pre>
</div>
</div>
<div id="toggle" class="article">
<h3><span>Toggle Calendar</span></h3>
<h4>You can toggle date and get those dates as array.</h4>
<div class="toggle-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-toggle">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-toggle">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-toggle">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-toggle">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
toggle: true,
select: function(dates, context) {
console.log('toggle active dates', context.storage.activeDates);
}
});
});</code></pre>
</div>
</div>
<div id="disabled" class="article">
<h3><span>Disabled Dates Calendar</span></h3>
<h4>You can turn off the specific dates.</h4>
<div class="guide">
<h5>You turned off dates below [random]</h5>
<div class="guide-dates"></div>
</div>
<div class="disabled-dates-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-disabled">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-disabled">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-disabled">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-disabled">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
disabledDates: [
'2017-01-01',
'2017-06-01',
'2017-06-02'
]
});
});</code></pre>
</div>
</div>
<div id="disabled-weekdays" class="article">
<h3><span>Disabled Weekdays Calendar</span></h3>
<h4>You can disable dates by specific weekday numbers (0 ~ 6, 0 is sunday).</h4>
<div class="disabled-weekdays-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-disabled-weekdays">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-disabled-weekdays">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-disabled-weekdays">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-disabled-weekdays">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
disabledWeekdays: [0, 6] // SUN (0), SAT (6)
});
});</code></pre>
</div>
</div>
<div id="disabled-range" class="article">
<h3><span>Disabled Range Calendar</span></h3>
<h4>You can give disabled range(minimum, maximum) by date string(YYYY-MM-DD).</h4>
<div class="disabled-range-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-disabled-range">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-disabled-range">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-disabled-range">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-disabled-range">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
minDate: '2017-04-01',
maxDate: '2017-06-24'
});
});</code></pre>
</div>
</div>
<div id="disabled-multiple-range" class="article">
<h3><span>Disabled Multiple Ranges Calendar</span></h3>
<h4><strong>Advanced</strong> - You can give multiple disabled date ranges by string(YYYY-MM-DD).</h4>
<div class="disabled-ranges-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-disabled-multiple-range">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-disabled-multiple-range">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-disabled-multiple-range">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-disabled-multiple-range">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
disabledRanges: [
['2016-10-05', '2016-10-21'],
['2016-11-01', '2016-11-07'],
['2016-11-19', '2016-11-21'],
['2016-12-05', '2016-12-08'],
['2016-12-17', '2016-12-18'],
['2016-12-29', '2016-12-30'],
['2017-01-10', '2017-01-20'],
['2017-02-10', '2017-04-11'],
['2017-07-04', '2017-07-09'],
['2017-12-01', '2017-12-25'],
['2018-02-10', '2018-02-26'],
['2018-05-10', '2018-09-17'],
]
});
});</code></pre>
</div>
</div>
<div id="pick-weeks" class="article">
<h3><span>Multiple Weeks Calendar</span></h3>
<h4><strong>Advanced</strong> - You can turn on/off weeks date range by clicking.</h4>
<div class="pick-weeks-calendar"></div>
<div class="box"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-pick-weeks">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-pick-weeks">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-pick-weeks">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-pick-weeks">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
pickWeeks: true,
multiple: true,
});
});</code></pre>
</div>
</div>
<div id="i18n" class="article">
<h3><span>I18N Support</span></h3>
<h4>PIGNOSE Calendar supports various languages.</h4>
<div class="group">
<h5>Korean</h5>
<div class="language-calendar language-ko-calendar" data-lang="ko"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-lang-ko">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-lang-ko">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-lang-ko">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-lang-ko">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
lang: 'ko'
});
});</code></pre>
</div>
</div>
<div class="group">
<h5>Deutsch</h5>
<div class="language-calendar language-de-calendar" data-lang="de"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-lang-de">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-lang-de">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-lang-de">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-lang-de">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
lang: 'de'
});
});</code></pre>
</div>
</div>
<div class="group">
<h5>Chinese</h5>
<div class="language-calendar language-ch-calendar" data-lang="ch"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-lang-ch">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-lang-ch">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-lang-ch">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-lang-ch">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
lang: 'ch'
});
});</code></pre>
</div>
</div>
<div class="group">
<h5>Português</h5>
<div class="language-calendar language-pt-calendar" data-lang="pt"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-lang-pt">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-lang-pt">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-lang-pt">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-lang-pt">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
lang: 'pt'
});
});</code></pre>
</div>
</div>
<div class="group">
<h5>Danish</h5>
<div class="language-calendar language-da-calendar" data-lang="da"></div>
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html-lang-da">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript-lang-da">Javascript</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html-lang-da">
<pre><code class="language-markup"><div class="calendar"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript-lang-da">
<pre><code class="language-js">$(function() {
$('.calendar').pignoseCalendar({
lang: 'da'
});
});</code></pre>
</div>
</div>
<h5>Spanish</h5>
<div class="language-calendar language-es-calendar" data-lang="es"></div>
<h5>Supported languages</h5>
<div class="box box-languages" style="display: block;">
<div class="box-languages-set">
<span class="ui label blue tiny">en</span>
<span class="ui label blue tiny">ko</span>
<span class="ui label blue tiny">fr</span>
<span class="ui label blue tiny">ch</span>
</div>
<div class="box-languages-set">
<span class="ui label blue tiny">de</span>
<span class="ui label blue tiny">jp</span>
<span class="ui label blue tiny">pt</span>
<span class="ui label blue tiny">da</span>
</div>
<div class="box-languages-set">
<span class="ui label blue tiny">pl</span>
<span class="ui label blue tiny">es</span>
<span class="ui label blue tiny">fa</span>
<span class="ui label blue tiny">it</span>
</div>
</div>
</div>
<div class="article">
<h3><span>Dependency</span></h3>
<h4>This plugin has dependencies some javascript library.</h4>
<p>Check belows and import it.</p>
<ul>
<li>jQuery core library</li>
<li>Moment library</li>
</ul>
<br />
<p>Or you can use full built-in script.</p>
<p>If you use it, you don't need to import any dependencies.</p>
<pre class="center"><code class="language-html"><script type="javascript" src="dist/js/pignose.calendar.full.min.js"></script></code></pre>
</div>
<div id="content" class="article">
<h3><span>Options</span></h3>
<table class="ui table celled">
<colgroup>
<col style="width: 120px;">
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th colspan="2">name</th>
<th>type</th>
<th>description</th>
<th>default</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">lang</td>
<td class="center"><span class="ui label">string</span></td>
<td>A language to set to the Calendar.</td>
<td>en</td>
</tr>
<tr>
<td colspan="2">theme</td>
<td class="center"><span class="ui label">string</span></td>
<td>A theme to set to the Calendar. (light, dark, blue).</td>
<td>light</td>
</tr>
<tr>
<td colspan="2">format</td>
<td class="center"><span class="ui label">string</span></td>
<td>The date format that you want to print to input element by value.</td>
<td>YYYY-MM-DD</td>
</tr>
<tr>
<td colspan="2">date</td>
<td class="center"><span class="ui label">moment date object</span></td>
<td>You can change auto initialized date at first.</td>
<td>moment()</td>
</tr>
<tr>
<td colspan="2">week</td>
<td class="center"><span class="ui label">number</span></td>
<td>Your first day of week (0: Sunday ~ 6: Saturday).</td>
<td>0</td>
</tr>
<tr>
<td colspan="2">initialized</td>
<td class="center"><span class="ui label">boolean</span></td>
<td>You can turn on/off initialized date by this option.</td>
<td>true</td>
</tr>
<tr>
<td colspan="2">modal</td>
<td class="center"><span class="ui label">boolean</span></td>
<td>If you want display calendar as modal, You can use by setting modal option to true.</td>
<td>false</td>
</tr>
<tr>
<td colspan="2">buttons</td>
<td class="center"><span class="ui label">boolean</span></td>
<td>If you are using input type calendar, You can add button controller for confirm by user.</td>
<td>false</td>
</tr>
<tr>
<td colspan="2">toggle</td>
<td class="center"><span class="ui label">boolean</span></td>
<td>If you set true this option, You can use toggle on your Calendar.</td>
<td>false</td>
</tr>
<tr>
<td colspan="2">reverse</td>
<td class="center"><span class="ui label">boolean</span></td>
<td>If you toggle option turned on and this option also set true, Inital calendar dates start as inactive.</td>
<td>false</td>
</tr>
<tr>
<td colspan="2">multiple</td>
<td class="center"><span class="ui label">boolean</span></td>
<td>If you set true this option, You can use multiple picker on your Calendar.</td>
<td>false</td>
</tr>
<tr>
<td colspan="2">pickWeeks</td>
<td class="center"><span class="ui label">boolean</span></td>
<td>If you set true this option, You can use multiple range picker by one click on your Calendar.</td>
<td>false</td>
</tr>
<tr>
<td colspan="2">selectOver</td>
<td class="center"><span class="ui label">boolean</span></td>
<td>If you set true this option, You can pass the check of disabled dates when multiple mode enabled.</td>
<td>false</td>
</tr>
<tr>
<td colspan="2">enabledDates</td>
<td class="center"><span class="ui label">array</span></td>
<td>You can set enabled dates by using date string array by formatted to 'YYYY-MM-DD'.</td>
<td>[]</td>
</tr>
<tr>
<td colspan="2">disabledDates</td>
<td class="center"><span class="ui label">array</span></td>
<td>You can set disabled dates by using date string array by formatted to 'YYYY-MM-DD'.</td>
<td>[]</td>
</tr>
<tr>
<td colspan="2">disabledWeekdays</td>
<td class="center"><span class="ui label">array</span></td>
<td>You can set disabled date by using a weekday number array (This is a sequential number start from
0 [sunday]).</td>
<td>[]</td>
</tr>
<tr>
<td colspan="2">disabledRanges</td>
<td class="center"><span class="ui label">array</span></td>
<td>This option is advanced way to using disable settings, You can give multiple disabled range by double
array date string by formatted to 'YYYY-MM-DD'.</td>
<td>[]</td>
</tr>
<tr>
<td colspan="2">schedules</td>
<td class="center"><span class="ui label">array</span></td>
<td>Set and array of events to pin on calendar. Each event is an object that must contain a date string
formatted to 'YYYY-MM-DD' and class key that belong to classOnEvents dictionary indicating its
color on calendar. Events with not color class suitable are all pin with <span style="display: inline-block; width: .8em; height: .8em; background-color: #5c6270;"></span> #5c6270.
Issues may arise when the number of color class increase, this could break the calendar cell.</td>
<td>[]</td>
</tr>
<tr>
<td>scheduleOptions</td>
<td>colors</td>
<td class="center"><span class="ui label">object</span></td>
<td>Set a dictionary with class 'key' and color code 'value' used for pin events class by date.</td>
<td>{}</td>
</tr>
<tr>
<td colspan="2">minDate</td>
<td class="center"><span class="ui label">string</span></td>
<td>You can give a minimum disable date range by 'YYYY-MM-DD' formatted string.</td>
<td>null</td>
</tr>
<tr>
<td colspan="2">maxDate</td>
<td class="center"><span class="ui label">array</span></td>
<td>You can give a maximum disable date range by 'YYYY-MM-DD' formatted string.</td>
<td>null</td>
</tr>
</tbody>
</table>
</div>
<div id="content" class="article">
<h3><span>Callbacks</span></h3>
<table class="ui table celled">
<colgroup>
<col style="width: 120px;">
<col>
<col>
<col style="width: 180px;">
<col>
</colgroup>
<thead>
<tr>
<th colspan="2">name</th>
<th>type</th>
<th>arguments</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">init</td>
<td class="center"><span class="ui label">function</span></td>
<td class="center"><span class="ui label">context</span></td>
<td>This callback will be called once when you call the pignoseCalendar plugin and created calendar view.</td>
</tr>
<tr>
<td colspan="2">page</td>
<td class="center"><span class="ui label">function</span></td>
<td class="center"><span class="ui label">info</span>, <span class="ui label">context</span></td>
<td>This callback will be called when you click prev, next arrow button on the top of calendar.</td>
</tr>
<tr>
<td colspan="2">prev</td>
<td class="center"><span class="ui label">function</span></td>
<td class="center"><span class="ui label">info</span>, <span class="ui label">context</span></td>
<td>This callback will be called when you click prev arrow button on the top of calendar.</td>
</tr>
<tr>
<td colspan="2">next</td>
<td class="center"><span class="ui label">function</span></td>
<td class="center"><span class="ui label">info</span>, <span class="ui label">context</span></td>
<td>This callback will be called when you click next arrow button on the top of calendar.</td>
</tr>
<tr>
<td colspan="2">select</td>
<td class="center"><span class="ui label">function</span></td>
<td class="center"><span class="ui label">date</span>, <span class="ui label">context</span></td>
<td>This callback will be called when you select a date of calendar except disabled date (date click).</td>
</tr>
<tr>
<td colspan="2">click</td>
<td class="center"><span class="ui label">function</span></td>
<td class="center"><span class="ui label">event</span>, <span class="ui label">context</span></td>
<td>This callback will be called when you click a date of calendar (date click).</td>
</tr>
<tr>
<td colspan="2">apply</td>
<td class="center"><span class="ui label">function</span></td>
<td class="center"><span class="ui label">date</span>, <span class="ui label">context</span></td>
<td>This callback will be called when you apply a date of calendar. (OK button click).</td>
</tr>
</tbody>
</table>
</div>
<div id="content" class="article">
<h3><span>Methods</span></h3>
<h4>You can use the method like <span class="ui label blue">$element.pignoseCalendar('Method Name', arguments);</span> format.</h4>
<table class="ui table celled">
<thead>
<tr>
<th>name</th>
<th>type</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>set</td>
<td class="center"><span class="ui label">function</span></td>
<td>
You can set the specific date on calendar dynamically.<br />
The first parameter must be <span class="ui label">date string</span> or <span class="ui label">moment</span> type.
</td>
</tr>
<tr>
<td>select</td>
<td class="center"><span class="ui label">function</span></td>
<td>You can click day by using this method, First argument must be <span class="ui label">integer</span> type.</td>
</tr>
<tr>
<td>setting</td>
<td class="center"><span class="ui label">function</span></td>
<td>You can set the setting option dynamically, The option is the same you gave when initialize the plugin.</td>
</tr>
<tr>
<td>configure</td>
<td class="center"><span class="ui label">function</span></td>
<td>
You can set the global setting by using this method.<br />
If you set default language entirely, Use this method.
</td>
</tr>
<tr>
<td>init</td>
<td class="center"><span class="ui label">function</span></td>
<td>
This method is used internal of the plugin.<br />
Use the syntax sugar <span class="ui label">$(element).pignoseCalendar()</span> pattern.<br />
It is exactly the same one as above pattern.
</td>
</tr>
</tbody>
</table>
</div>
<div id="bower" class="article">
<h3><span>bower</span></h3>
<blockquote>
<p>If you use bower.</p>
</blockquote>
<pre><code class="language-bash">$ bower install pg-calendar</code></pre>
</div>
<div id="npm" class="article">
<h3><span>npm</span></h3>
<blockquote>
<p>If you use npm.</p>
</blockquote>
<pre><code class="language-bash">$ npm install pg-calendar</code></pre>
</div>
<div id="yarn" class="article">
<h3><span>yarn</span></h3>
<blockquote>
<p>If you use yarn.</p>
</blockquote>
<pre><code class="language-bash">$ yarn add pg-calendar</code></pre>
</div>
</div>
</body>
</html>
Linux 65-254-81-4.cprapid.com 5.14.0-284.11.1.el9_2.x86_64 #1 SMP PREEMPT_DYNAMIC Tue May 9 05:49:00 EDT 2023 x86_64
Apache
65.254.81.4