initialize calendar with different date

[kennethanceyer]

initialize calendar with different date

[KennethanCeyer]

Hi @gaurav99t

I understand that you want to choose different date

each of PIGNOISE calendar elements.

if you give date option as moment object.

You can initialize date each of calendar.

Follow the below snippet.

$('.calendar1').pignoseCalendar({
    date: moment('2017-05-01');
});

$('.calendar2').pignoseCalendar({
    date: moment('2017-07-22');
});

$('.calendar3').pignoseCalendar({
    date: moment('2017-08-01');
});

[gaurav99t]

thank you for your reply, but it did not help me out. i used following code but none of them is working for me

  $('.calender1').pignoseCalender({date: moment('2017-05-01'),

		select: function(date, obj) {
			var text = ( date[0] === null? 'null':date[0].format('YYYY-MM-DD') );
			moveToolTip(text);
		}
	});

$('.calendar1').pignoseCalendar({
date: moment('2017-05-01');
});

[KennethanCeyer]

Hi @gaurav99t

date option will initialize starting date.

However select will be executed after only user select a date.

Do you want to execute select or something method for display a tooltip?

[gaurav99t]

yes i want to display multiple calendars on a single page and all these calendars will have different dates by default loading. And tooltip will be displayed on mouse move

[KennethanCeyer]

Hi @gaurav99t

I understand that you want to initialize calendar when calendar is ready (with date value).

Unfortunately there is no feature right now (v1. 4.13).

I will add initialized callback within tommorow.

[gaurav99t]

Can you just help me to get 12 calendars initialized with 12 different dates? My tooltip works on mousemove. this is my last problem for this work.

Just help me to make this code work for the date entered in moment. Do i need to include any other js file too for making it work?

  $('.calender1').pignoseCalender({date: moment('2017-05-01'),

		select: function(date, obj) {
			var text = ( date[0] === null? 'null':date[0].format('YYYY-MM-DD') );
			moveToolTip(text);
		}
	});

[KennethanCeyer]

Hi @gaurav99t

I can help to solve your problem.

But, The information that you gave seems a little bit short.

Can you add some snippet or example?

It will be helful to solve these problem if you do that.

Thank you.

[gaurav99t]

here is attached file that im using for displaying tooltip into the calendar

in pignose.calender.js i replaced click with mousemove to make it work on mousemove.

please move mouse on 18 to 24 APR 2017 tooltip will appear

$unit.bind('mousemove', function(event) {

now my only problem is left, i just want to display next 11 months with currrent month.

if this is done then im done with this issue :-)

calendar.zip

[KennethanCeyer]

hello @gaurav99t

I'm really sorry about late reply.

I thin i still don't understand what you wanted.

However i try to fix your problem Please check attachment file.

calendar_fixed.zip

mousemove event is not good UX, I changed this event to mouseenter mouseleave

And i added the date option on your inline script as following.

$('.calender1').pignoseCalender({
	select: function(date, obj) {
		/*obj.calender.parent().next().show().text('You selectTMPed ' + 
		(date[0] === null? 'null':date[0].format('YYYY-MM-DD')) +
		'.');*/
		//alert(date[0] === null? 'null':date[0].format('YYYY-MM-DD'));
		var text = ( date[0] === null? 'null':date[0].format('YYYY-MM-DD') );
		//alert(text);
		//document.getElementById("tooltip").innerHTML = text;
		//grabId(event);
		moveToolTip(text);
	},
	date: moment().add('11', 'M').startOf('month')
});

I hope this solution is what you wanted.

Thank you.

[gaurav99t]

thanks for lot for your time
I can not find tooltip working when my mouse enters in the calendar and moves on different dates, these are the dates that has tooltip

{"2017-04-18":"This is tool tip 1", "2017-04-19":"This is tool tip 2", "2017-04-20":"This is tool tip 3", "2017-04-21":"This is tool tip 4", "2017-04-22":"This is tool tip 5", "2017-04-23":"This is tool tip 6", "2017-04-24":"This is tool tip 7"}

BTW i have used another calendar that solved out my problem :-)

thanks a lot again for your help

[KennethanCeyer]

Hello @gaurav99t

I am glad you have solved this problem.

Thank you 👍

[ashwanicyber]

Hello @KennethanCeyer I want to add event when clicks on next and prev month in toggle calendar. I tried lot of methods but not worked for me.

[KennethanCeyer]

Hi @ashwanicyber

I am hard working right now in cafe, South Korea.

Sorry i'm late but i'm focusing to add this feature.

It will be updated at 1.4.21 Thank you.

[KennethanCeyer]

@ashwanicyber

Your topic is realted #39 .

And i will close this issue, Please check #39 to confirm the progress.

Thank you.

[firefighter-sourav]

please add default selected dates feature. Which will be already selected when calendar loads. This will help me a lot.