kennethanceyer / pg-calendar Goto Github PK
View Code? Open in Web Editor NEW:calendar: beautiful and eidetic date picker
Home Page: http://www.pigno.se/barn/PIGNOSE-Calendar
License: MIT License
:calendar: beautiful and eidetic date picker
Home Page: http://www.pigno.se/barn/PIGNOSE-Calendar
License: MIT License
I have to bold the dates in the schedule calendar instead of circles in the bottom.
Please let know how can i customize it.
Hello Kennethan,
Not sure if this is your scope of work but our current calendar format before it goes to Pignose shows the date as MMDDYY but I want it to show as DAYOFWEEK,MONTH,DATE,YEAR so that way it is universal and not confuse Europe/Asia date format
Hope you can advice how best to see something like this before it goes to Pignose Calendar
Thanks
current date is not selected in single mouse click and date value is not coming into the array..
please help!!
I have a bunch of dates and use them to disable specific ranges in the calender. I use the same calender for selection, but it's possible to select "over" the disabled dates.
for example:
disabled range: 2017-01-10 to 2017-01-15
date start: 2017-01-05
date end: 2017-01-20
it's possible to select that in the first place -> not the greatest when it comes to usability.
It would be better if clicking on disabled date also calls callback where we can show info like date disabled
Hi,
I have a ticket form where i am using the depart and return dates, i have two datepickers, when first change it cause the min date change to 2nd. I am using in select function and in apply function but it is not changing the dates in 2nd.
When change event call then i set new date limits and call like this.
var $btn2 = jq("#txtReturnDate").pignoseCalendar({
modal: true,
minDate: finaldate,
maxDate: maxDate,
select: function (date) {
$btn2.text(date);
}
});
Hey,
I have a "rangeDate is not defined" with options below
minDate: new Date(), disabledRanges: disabledRanges, format: 'DD.MM.YYYY', multiple: true,
disabledRanges — array [ [], [] ... [] ]
How I can to fix it?
is it possible to disable all days by default and then enable an array of days?
The keys generated for caching in the Helper:Format are not always unique. In particular, if you format a date like (2017-1-21) and then format (2017-12-1), the second appears as a cache hit on the first. (Key is '{0}-{1}-{2}2017121' for both.) This should be solvable by just using a '+' for the join when creating the cache key, e.g.
var key = format + args.join('+');
resulting in '{0}-{1}-{2}2017+1+21' and ''{0}-{1}-{2}2017+12+1' as the two respective keys.
Please help me to disable dates while I got input as a range like 05-11-2016~23-11-2016
.
Is there any way like this.. I know you have created minDate
and maxDate
but I used them already to disable past days from currentday. So I need Another spec to disable many ranges in one calender.. Hope you got my point.. right?? Just think of it, if there's a need to block multiple ranges by each update. Thanks.
$('.multi-select-calendar').pignoseCalendar({ format: 'DD-MM-YYYY', multiple: true, minDate: minDate, disabledDates: d_dates, select: onClickHandler, disabledWeekdays: [], disabledRange:['05-11-2016','23-11-2016'] });
as my disable range contains upper and lower bounds of the date range.
Hi ,
I am a new user to Pignose calendar api , I want to trigger previous and next button and write custom code on that , how can i do that.
Hi, is it possible to add event programmatically, for example when i change month with arrow button?
Hello Kennethan,
I noticed on the Disabled Range Calendar even on your page demo example that even though today is Nov 12, you are still able to go back to Nov 9, see for yourself http://www.pigno.se/barn/PIGNOSE-Calendar/
Thanks!
Hi.
Thank you for great calendar. Your calendar is limited in several languages. I want customize your calendar for Persian date. How can I do this? or How do I change your code? You use moment.latest.min.js in your project, How can i use moment-with-locales.min.js in your code? of course this is better idea your calendar as much as possible to support all languages that will be excellent but if you help me I would be very grateful.
Thank you a lot.
Note: Persian calendar is little different with other calendar. In Persian calendar first day of week is Saturday and last day of week is Friday. First 6 month is 31 days and 5 second month is 30 days. in last month depending on whether it is a leap year or not, days can be 30 days or 29 days (If leap year --> 30 days, else 29 days).
Hi. How about adding new translations? I mean russian and ukrainian languages.
Hi, i add support for Language PT-BR,
This is link;
Added support for Spanish language in my Fork
Hi,
The week option works with 0 and 1 only (for me)
weeks: {
it: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
},
monthsLong: {
it: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
},
months: {
it: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
}
Hey, is it possible to make a Monday as a starting day of a week?
Hello Kennethan
I'm a French developer and I use your calendar and I like it but their is a problem.
When the language of the calendar is set on 'fr' for French the first day is 'Lundi' but on the other language the first day is 'Sunday'.
Here is the French version
Has you can see with the French version all days are shifted by one day.
I found a solution of this issue if you want to correct the original script.
On the file pignose.calendar.js,
you need to change on line 184 the line :
fr: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
to the line :
fr: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
It would be great to add a function to choose the first day of the calendar if you have time :)
Thank you for your tool you help me a lot !
$('.input-calendar').pignoseCalendar({ format:"DD-MM-YYYY", buttons: false, multiple: true, disabledWeekdays: [0,3,6], select: onClickHandler });
Hi im a newbie of javascript, we have a project in capstone that needs an appointment scheduler and i am using this calendar as the datepicker but i dont know how to get the value selected. Pls help asap! thanks :)
The short version of the first German month is not Jän
. It is Jan
.
Hi!
When relating a calendar with an input as:
<input type="text" id="text-calendar" class="calendar" />
$(function() {
$('input.calendar').pignoseCalendar({
modal: true,
format: 'YYYY-MM-DD' // date format string. (2017-02-02)
});
});
I the user clicks on the input text box, pignose's modal appears, the user can now choose a date and the date is written into the input text box. So far so good.
If the user decides he wants a different date, if he clicks again on the input text box nothing happens. The Javascript console shows the following error message:
ReferenceError: models is not defined
This is true even in the example title Input type provided at:
https://www.pigno.se/barn/PIGNOSE-Calendar/
Is this the expected behaviour?
Thanks!
Weekdays
pl: ['Nie', 'Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob']
Months long
pl: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień']
Months short
pl: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru']
No point in making a pull request for something so minor.
Great work on the plugin btw, it's superb.
Is there a way to not able to click previous days before today (minDate)? If so please show, thanks!
Hi,
Went through all issues and documentation and can't believe no one need this, or I'm missing something.
I want to populate some dates on calendar page load. I can set one date as documented, but not multiple.
Set function was able to set only one too. Please shed some light on me. Thanks.
Hi Guys! I have problem when I want to use multiple option and disable Weekdays. Specifically, when active both option, I can't select multiple day correctly. For instance, Having selecting one day, the second day of selected range disable de firts day selected. My code is next:
$.ajax({
type: "POST",
url: "/Aparicion/GetDisabledDays",
data: { id: $('#concepto_idtarifa').val() }
}).done(function (data) {
if (data != null) {
Date.prototype.yyyymmdd = function () {
var mm = this.getMonth() + 1;
var dd = this.getDate();
return [this.getFullYear(),
(mm > 9 ? '' : '0') + mm,
(dd > 9 ? '' : '0') + dd
].join('/');
};
$('.calendar').pignoseCalendar({
disabledWeekdays: data,
lang: 'es',
multiple: false,
format: 'DD-MM-YYYY',
minDate: new Date().yyyymmdd(),
select: onClickHandler
});
}
Thank you for the help!
Hi,
I'm trying to create a calendar without an initialized (selected) date. According to the documentation
(https://github.com/KennethanCeyer/pg-calendar/wiki/Documentation):
initialized
If this option is false, Calendar doesn't display active date at first time.
type: boolean
default: true
example:
$('.calendar').pignoseCalendar({
initialized: false
});
I've looked into Pignose's code and it seems that the option is called initialize (without the final "d"). There's an error in the documentation.
Cheers,
Oink!
How i can prevent pignose calender from deselect the date once selected. until other date is not selected.
I would like an option to set a range of days to pick at once.
eg...
if you pick 2016-11-22 it'll automatically set the range to look like:
(5 days ahead): 2016-11-22 ~ 2016-11-27
so the people using the calendar don't have to pick two dates.
:: i've for my need added a new language to the plugin (da - Danish):
var languagePack = {
supports: ['en', 'ko', 'fr', 'ch', 'de', 'jp', 'pt', "da"],
weeks: {
en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
ko: ['일', '월', '화', '수', '목', '금', '토'],
fr: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
ch: ['日', '月', '火', '水', '木', '金', '土'],
de: ['SO', 'MO', 'DI', 'MI', 'DO', 'FR', 'SA'],
jp: ['日', '月', '火', '水', '木', '金', '土'],
pt: ['Dom','Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
da: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
},
monthsLong: {
en: ['January', 'February', 'March', 'April', 'May', 'Jun', 'July', 'August', 'September', 'October', 'November', 'December'],
ko: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
fr: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
ch: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
de: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
jp: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
pt: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
da: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'],
},
months: {
en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
ko: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
fr: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'],
ch: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
de: ['Jän', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
jp: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
pt: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
da: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
}
};
Just found other wrong german translations
Jänner -> Januar
Feber -> Februar
It is possible to not permit the selection of a date range if includes a date disabled?
thank you
Hello.
When I use "toggle mode" and only select one date and afterwards I click "OK" date appear in input control. When I click the input control and calendar appears date is selected in calendar.
BUT, if I select more than one date, they do appear in input control but not again when the calendar appears next time. Dates are in input value but not initialized in calendar :'(
Thanks.
PD. Using last version
How to add enabledDates feature in place of disabledDatesin jquery code??
What is the best way to apply custom CSS (line heights, spacing, colors, and positioning) without having to write a WHOLE custom css?
Also I'm trying to position the calendar so it floats to the right or left but the width gets messed up. (I've tried putting it inside a holder div but same issues)
An other question about enabling and disabling dates. How is it possible to disable some weekdays for ever. For example always disable saturday and sunday.
disableWeekdays: [6,7]
best regards
feldmarv
Hi, If we want to disable past days of calendar, how we can enable this?
I'm working in a project and i found a problem.
When i click in date of today is return null, however when i click again its work.
Hi ,
I want to call particular month and year calendar , is it possible to do that using pignose calendar
pignose.calendar.js
weeks:
ch: ['日', '一', '二', '三', '四', '五', '六'],
monthsLong:
ch: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
months:
ch: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
i want to initialize calendar from dates likes
2017-05-01
2017-07-22
2017-08-01
how can i do it? in this code
$('.calender1').pignoseCalender({ ... });
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.