CalendarXP.net Support Forum Index CalendarXP.net Support
Most forums here are private and invisible to public.
 
 FAQFAQ   SearchSearch   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

Using fAddEvent to change an event from *within* the HTML file.

 
Post new topic   Reply to topic    CalendarXP.net Support Forum Index -> FlatCalendarXP Related
View previous topic :: View next topic  
Author Message
Cady36



Joined: 16 Dec 2005
Posts: 25

PostPosted: Tue Jan 03, 2006 9:05 pm    Post subject: Using fAddEvent to change an event from *within* the HTML file. Reply with quote

Using triplex, I am trying to use fAddEvent (actually defined as a holiday - it is simply a particular weekday) to change an event after the calendars have loaded.

I've tried calling it from the html file, which will eventually be an asp file, and I've tried defining a function that calls it in plugins.js that I can call from the html file. Neither method worked.

In my agenda.js file, the following function is all that is defined:

Code:
function fHoliday(y,m,d) {
var rE=fGetEvent(y,m,d), r=null;
var dayOfWeek=new Date(y,m-1,d).getDay();
if (dayOfWeek!=gContainer.changeover) r=["Select a Changeover Day","",gcCellBG,"Black"];
else r=["Changeover Day","","#33348E","white"]
return rE?rE:r;
}


Anything other than a Changeover day is disabled as a clickable selection in the plugins.js fAfterSelection function.

In certain instances, after the calendar loads I need to disable some of the "Changeover Days", depending selections the user makes on the page. Am I going about this the wrong way?

Thanks!

Julie

P.S. An unrelated question - throughout the plugins.js files, there are functions called with (y,m,d,e) - I can't find any definition of "e" except "e is a reference to the triggering event object"...where in the tutorial can I find more information about what precisely "e" is, what the event codes are, etc.? It sounds handy! Smile

j
Back to top
View user's profile Send private message
calendarxp
Site Admin


Joined: 30 Jan 2005
Posts: 409

PostPosted: Wed Jan 04, 2006 12:22 am    Post subject: Reply with quote

First of all, if you would like to call anything (like fAddEvent) from your html, you will have to:

1) give the calendar a context-name, e.g. gfFlat, and call the function with that name as prefix:
Code:
gfFlat.fAddEvent(...)

You may find how to specify context-name in the HelloWorld Tutorial

2) wait until the calendar is fully loaded before issuing above call, which means the only safe place to call gfFlat.fAddEvent() is in the onload event of either the <iframe> tag or <body> tag. Please refer to this FAQ for details.

Now, for the example you gave, since you are using fHoliday to define the changeover dates, the best way to change them is to code some logic in the same place so that it only returns changeover properties when cerntain condition met. e.g.
Code:
function fHoliday(y,m,d) {
  var rE=fGetEvent(y,m,d), r=null;

  var dayOfWeek=new Date(y,m-1,d).getDay();
  var isChangeOver=(dayOfWeek!=gContainer.changeover);
  for (var i=0; i<_userSelectedDates.length; i++)
     if (_userSelectedDates[i].getDate()==d) {
        isChangeOver=false;
        break;
     } 
  r=isChangeOver?["Select a Changeover Day","",gcCellBG,"Black"]
                          :["Changeover Day","","#33348E","white"];
 
  return rE?rE:r;
}

In the above code, the _userSelectedDates is an array to store all dates selected by user.

Finally, the e is the javascript event object generated when user interacted with the calendar, e.g. click, mouseover etc. You can of course use it to retrieve additional info to improve the UI - see the plugin of multipicker demo for good examples (user can shift or ctrl click to select dates).

_________________
Copyright 2003-2011 Idemfactor Solutions, Inc. All rights reserved.
Back to top
View user's profile Send private message
Cady36



Joined: 16 Dec 2005
Posts: 25

PostPosted: Wed Jan 04, 2006 12:36 am    Post subject: Reply with quote

Yours was a lot more elegant than mine (big surprise there!)

I *did* think about context names, but the problem is that I'm using the Triplex theme, so I actually have 3 names. Do I need to call it once for each calendar, should I use nifty looping routine that you use in fSync (var cn=gTheme[3].split("_"); etc.), or...? We won't necessarily know what calendar is up in which calendar iframe. If I apply to one and repaint all will they sync, or do they sync automatically, or..?

Sorry to be such a pain.

Thanks for all your help!

Julie
Back to top
View user's profile Send private message
Cady36



Joined: 16 Dec 2005
Posts: 25

PostPosted: Wed Jan 04, 2006 12:49 am    Post subject: Reply with quote

I think I can actually figure it out from here (I hope Very Happy)

I created a variable in the main document called gContainerFlag and set it to 0.

I changed the fOnload() function to:

function fOnload() {gContainer.gContainerFlag=1}

That should tell me when it's safe to run the fAddEvent function, and hopefully that will take care of it.

Thanks!

Julie
Back to top
View user's profile Send private message
calendarxp
Site Admin


Joined: 30 Jan 2005
Posts: 409

PostPosted: Wed Jan 04, 2006 2:42 am    Post subject: Reply with quote

Remember that all 3 of them sharing the same agenda - which means you only need to call fAddEvent once from any of them (no need to call 3 times).

The fRepaint() call is only used to refresh the interface not the event storage.

And yes you are right about the fOnload(), I'm really glad to see you are mastering the API now. :)

_________________
Copyright 2003-2011 Idemfactor Solutions, Inc. All rights reserved.
Back to top
View user's profile Send private message
Cady36



Joined: 16 Dec 2005
Posts: 25

PostPosted: Wed Jan 04, 2006 5:36 am    Post subject: Very long post - explanation and examples... Reply with quote

Whew!

Just for the sake of completeness, I'm including my final fHoliday function, as used with the Triplex theme, and an explanation of how/why. (I'd hate to have someone else search for this specific solution, and have this thread stop short.) I'm sure this can be improved upon but here's how I'm doing it.

The function that CalendarXP provided earlier in the thread was terrific for a single calendar, but required a couple of modifications to work with the Triplex theme.

This calendar is for a booking system. Since different properties start their rental week on different days of the week, a variable - changeover - holds the day of the week, numbered from 0 (Sunday) through 6 (Saturday).

These start dates or "changover days" are highlighted in one color, and the "etc" value of the agenda is set to true. Non-changeover days (the other days of the week) are shown in another color, and the "etc" value is set to false.

Rentals are for whole weeks only, so we have a value for duration in the html/asp file. We used actual days, rather than number of weeks, as it will make it more versatile if we need to change to other rental lengths down the road.

The functions for plugins.js that allow automatic selection according to the duration, are also included in this post.

Finally, there's an array defined in the html/asp file specifying change over dates which are unavailable due to previous rentals, or because the full duration (2, 3, 4 weeks, etc.) is not available, even though the particular week may be available. CalendarXP tech called this _userSelectedDates and I changed to to _unavailableDates for readability.

In the HTML/ASP file:

The three variables set in the HTML/asp file are and accessed via gContainer are:
changeover - the day of week that the rental starts on.
rDuration - the length of the desired selection; the duration will be controlled by a dropdown menu.
_unavailableDates - the array holding changeover dates that are not available due to prior rental or for other reasons, including the duration of the stay.
Any of these variables can be changed live in the HTML/asp file to be updated on the calendar.

In agenda.js:

Code:
function fHoliday(y,m,d) {
  var rE=fGetEvent(y,m,d), r=null;
  var dayOfWeek=new Date(y,m-1,d).getDay();
//Compare the day of week of the current date, to our Changeover day of week. If it's not a Changeover day, set isNotChangeOver to false.
  var isNotChangeOver=(dayOfWeek!=gContainer.changeover);
  for (var i=0; i<gContainer._unavailableDates.length; i++) {
//The original function, for a single calendar, just checked the day
//of the month. Using the Triplex theme, we have to take year, month and date.
//into consideration, because we have three calendars showing.
    var sDay=gContainer._unavailableDates[i].getDate();
    var sMonth=gContainer._unavailableDates[i].getMonth();
    var sYear=gContainer._unavailableDates[i].getFullYear();
//if the current date is in the _unavailableDates array, set it to isNotChangeOver
    if (sDay==d&&sMonth==m&&sYear==y) {
        isNotChangeOver=true;
        break;
     }}
//If a day is not a changeover set the "etc" value to false. If it IS a changeover day, set "etc" to true.
//We couldn't set the "action" to null for non-clickable dates, because that would prevent us from selecting whole weeks.
//By using a true/false scheme, we used fGetAgenda in the plugins.js to determine whether or not to allow the date to be selected.
//(See following functions.)
r=isNotChangeOver?["Please Select a Changeover Day","",gcCellBG,"Black",null,null,null,false]
                          :["Changeover Day","","#33348E","white",null,null,null,true];
  return rE?rE:r;
}


In plugins.js, we defined two of the optional functions:

Code:
function fAfterSelected(y,m,d,e) {
var evt=fGetAgenda(y,m,d);
//This checks to see if "etc" portion of fGetAgenda is true (It's a changeover date, and it is selectable.) If it's set to false, the click is ignored.
if (evt[7]){
  var dt=new Date(y, m-1, d);
  if (!gContainer._duration)
    gContainer._duration=[];
  for (var i=0; i<gContainer.rDuration; i++) {
    gContainer._duration[i]=[dt.getFullYear(), dt.getMonth()+1, dt.getDate()];
    dt.setDate(dt.getDate()+1);
  }
  gContainer.gfFlat_1.fRepaint();
  gContainer.gfFlat_2.fRepaint();
  gContainer.gfFlat_3.fRepaint();
}}

function fIsSelected(y,m,d) {
  if (!gContainer._duration) return false;
  var dur=gContainer._duration;
  for (var i=0; i<dur.length; i++) {
    if (y==dur[i][0]&&m==dur[i][1]&&d==dur[i][2])
      return true;
  }
  return false;
}


That pretty much takes care of it. I know I have more work to do to finish mine off, and I'm sure there will be bugs, but CalendarXP did the hard part.

Hopefully this will help someone else, and if nothing else, if I forget how it was done, at least I know where to find instructions!

Julie

P.S. CalendarXP Tech support - please feel free cut this down or even delete it (I have a copy - lol) - been working 18 hours straight and this seems pretty long. Too much coffee. Smile
Back to top
View user's profile Send private message
calendarxp
Site Admin


Joined: 30 Jan 2005
Posts: 409

PostPosted: Wed Jan 04, 2006 6:08 am    Post subject: Reply with quote

Julie,

Congrats for finishing the customization. It's a really tough one and you did it!

And, thanks very much for sharing your knowledge and summarize your resolution here in the board. It's very generous of you and we'll for sure keep the post for future reference.

best regards,
Victor

_________________
Copyright 2003-2011 Idemfactor Solutions, Inc. All rights reserved.
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    CalendarXP.net Support Forum Index -> FlatCalendarXP Related All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum


Copyright 2003- Idemfactor Solutions, Inc. All rights reserved.
Powered by phpBB © 2001, 2005 phpBB Group