Anyone familiar with the Jquery UI Datepicker widget?

[Boy_Wonder]

I'm trying to build a custom calender for SHIELD and I need a bit of help.

Here's the page as it stands so far: 


shieldrpg.net/page/shield-calender

What I'm trying to do is work out how I can set a variable to always match what the month selected is when you flick through the month so that I can then set up so that you see the different events (and different header images) per month

Also wondering if there's any easy way to set it up so there's the month view and a more detailed week view that shows specific things like member birthdays

[Boy_Wonder]

Anyone?

[Peter]

api.jqueryui.com/datepicker/#option-onChangeMonthYear
api.jqueryui.com/datepicker/

[Boy_Wonder]

   var shownMonth

$('#calendar').datepicker('option', 'onChangeMonthYear', function(year, month) {

   shownMonth = month;

})This is where I've tried to use that

[Peter]

Boy_Wonder ,

You really need to disable that snow plugin, it's really bad on your forum with the amount of plugins you have.

Well.. you have access to the month now, which is what you asked. You now need to take that and use it for whatever else you need to do (i.e if you have an autoform for events where you can select the month, just match the indexes up, though yours will be indexing from 0, Date Picker will not... (index + 1) == showMonth).

Edit:  Or set each month in the select option component to be the actual month index, then you don't need to increment it.

[Boy_Wonder]

Well apparently I haven't got it set up right as say for example on this statement

 else if (selectedMonth == February || shownMonth == 2) {
         eventsArr.push("<div class='eventListItem'><div class='eventListTitle'><h3>Event Title</h3><span class='date'>Date here</div><div class='eventContent'>I am an event</div></div>", "<div class='eventListItem'><div class='eventListTitle'><h3>Event Title</h3><span class='date'>Date here</div><div class='eventContent'>I am an event</div></div>", "<div class='eventListItem'><div class='eventListTitle'><h3>Event Title</h3><span class='date'>Date here</div><div class='eventContent'>I am an event</div></div>");
       eventsOutput = eventsArr.join("");
               imgDispCalen = "https://68.media.tumblr.com/9b542b247a8cdc2e4263d1e2ad85fcc4/tumblr_ojt7nc7d0X1sjhtm9o4_1280.png";

   }

It's not getting that I've got the February month showing when I flick through

[Peter]

"February" is a string.

[Former Member]

Are those templates <div class='eventListItem'></div> temporary or will you be using them? I'm also not sure where you are rendering/outputting them to?

I think I have an Idea of what you are trying to do but some things confuse me a little.
Based on what I think you are trying to do, I would just keep a monthlyEventState object and using the showMonth variable as the index to fetch that months state

For example

Edit: dunno why the formatting reset ? :/

$('#calendar').datepicker({
     inline: true,
     firstDay: 1,
     showOtherMonths: true,
     dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 });
 
 $('#calendar').datepicker('option', 'onChangeMonthYear', function(year, month) { shownMonthSetting = month })

 var eventsArr = [ ];
   var eventsOutput;
   var outputHTML;
   var imgDispCalen;
   var shownMonth;
   
 $('#calendar').datepicker('option', 'onChangeMonthYear', function(year, month) {
     shownMonth = month;
 })
 
 var selectedMonth = $('.ui-datepicker-month').text();
 

 var monthlyEventStates = {
   1: { // january
     name: 'January',
     image: 'https://68.media.tumblr.com/7e7472f72f0fd62e640cd4fa27c363ca/tumblr_ojt7nc7d0X1sjhtm9o2_r1_1280.png',
     events: []
   },
   2: { // febuary
     name: 'Febuary',
     image: 'https://68.media.tumblr.com/9b542b247a8cdc2e4263d1e2ad85fcc4/tumblr_ojt7nc7d0X1sjhtm9o4_1280.png',
     events: []
   }
 }
 
 // grab a months event state, using showMonth as the index
 //
 var someNewEventState = monthlyEventStates[shownMonth];
 
 // push a new event for month X
 //
 someNewEventState.events.push(
   setEvent({
     title: 'Some Event',
     date: '',
     content: ''
   })
 )
 
 // create an event template(string)
 // that will get push to the selected monthlyEventState
 // @TODO: to be complete
 //
 function setEvent(template){
   return "<div class='eventListItem'>"
     + "<h3 class='eventListTitle'>"+template.title+"</h3>"
     + "<span class='date'>"+template.date+"</span>"
     + "<div class='eventContent'>"+template.content+"</div>"
     + "</div><!-- end event list item -->";
 }
 
 // render the events for that month somewhere ???
 //
 function render(){
   var $scope = $('#UpcomingEvents');

   $scope.find('.titleBar').html(someNewEventState.name);
   $scope.find('.eventsPosting').append(someNewEventState.events.join(''));

   $('#calendar').find('div').eq(0)[0].innerHTML = "<img src='"+someNewEventState.image+"' alt='#'/>"
 }

[Boy_Wonder]

Okay basically I don't know if you can see this link:

shieldrpg.net/page/shield-calender

The events thing outputs into the right hand column

So if you could explain exactly how I'd set things up to display like that then I'm happy to switch but it needs to be very simple

[Former Member]

I would need a bit more information

How are events getting created?
Are they created via user interaction?
Via a plugin form, or offsite ?

I amended the code to work for testing purposes(at least I think it will work)
I cannot test it accurate enough myself and it would take me a while to setup a sandbox.

This section of the code is where you would fetch your events(array|object)
and loop over them, this code just shows you how to add one

someNewEventState.events.push(
 setEvent({
   title: 'Some Event',
   date: '',
   content: ''
 })
)

[Boy_Wonder]

I'm creating the events manually in the code