Multiple Kinds of Events

Scheduler Javascript
#1

I have two different types of events, Activities and Appointments, that I’d like to be displayed together in the same view. I’ve been able to use the multiple source capability to get them in place. By adding in a “type” attribute to the xml files, I am able to apply different colors to the events based on that type.

What I’m looking to do is to have Appointment launch the standard form, but I’d like Activities to launch a custom form.

Any advice?

Thanks

#2

Well, I think I got it figured out. Here’s what I did. I’m open to hearing any better implementations should anyone care to share:

[code] scheduler.showOriginalLightbox = scheduler.showLightbox;

scheduler.showLightbox = function(id){
var ev = scheduler.getEvent(id);
switch(ev.type) {
case “Activity”:
load_activity(id);
break;
case “Appointment”:
scheduler.showOriginalLightbox(id)
break;
default :
scheduler.showOriginalLightbox(id)
break;
};
}
[/code]

#3

Hello,

Yes, that’s the correct approach: depending on event.type we are opening default or custom details form.

Best regards,
Ilya

#4

I realized that I would need a prompt to allow people to select the type of event they want create. However, I’m trying to add a Cancel link, but I’m not sure what function to bind to the cancel button, or what would be the best approach to cancel the event creation of the event.

#5

Check samples\02_customization\16_custom_form.html

You can call
scheduler.endLightbox(false);
from cancel button.

#6

Well, what I wanted was a separate dialogue/light box to appear that would serve to allow the user to indicate the type of event to be created. It would look something like this:

731×395 31.3 KB

Then I need it to launch the appropriate detail form, based on the type they selected, or close altogether, if they hit cancel.

Does this make sense? Where would you recommend I begin?

Thanks

#7

Well, here’s what I have so far. Let me know if there’s a better approach.

I have a box:

<div id="new_event" class="dhx_cal_light dhx_cal_light_rec" style="display: none;">
  <div class="padding">
    <h3>Create an:</h3>
    <div class="type_selection activity"><span>Activity</span></div>
    <div class="type_selection appointment"><span>Appointment</span></div>
  </div>
</div>

And then this modification to the showLightbox behavior:

  // Store the original lightbox
  scheduler.showOriginalLightbox = scheduler.showLightbox;

  // Determine if the event has a type
  // If not, it's a new event, and the user needs to indicate the type using the #new_event box
  scheduler.showLightbox = function(id){
    var ev = scheduler.getEvent(id);
    if (typeof(ev.type) == 'undefined') {
      scheduler.typeSelector(ev)
    } else {
      load_event(ev);
    };
  }

  // Launch the new_event box
  // Observe which element is clicked, and use that text for the type
  // Load the event details form
  scheduler.typeSelector = function(ev) {
    scheduler.showCover(html("new_event"));
    $j(".type_selection").click(function() {
      ev.type = $j(this).text();
      scheduler.hideCover(html("new_event"));
      load_event(ev)
    });
  }

  // Switches on the type to load the appropriate form
  function load_event(ev) {
    switch(type) {
      case "Activity" :
        load_activity(ev.id);
        break;
      case "Appointment" :
        scheduler.showOriginalLightbox(ev.id)
        break;
    }
  }
#8

willclark can you write the code of your load_activity(ev.id); function?
thank you.

#9

load_activity() is just an ajax call to a Rails action and doesn’t use the scheduler details form (standard or custom) functionality at all. The activities are date based and we wanted them in the calendar grid. So, I don’t know think the code would be useful at all.