Calendar Flare

Scheduler ASP.NET MVC
#1

Google has an addon/lab widget called calendar flare. This addon allows the user to mark up events with images (stars, check marks, etc…).

It is be stressed to me that this is an important feature that needs to be included as they move away from Google. See link below for an example.

https://www.google.com/calendar/embed?src=3cd858ta03s299d0kmtbh5rj2k%40group.calendar.google.com&ctz=America/New_York

Any advice on how to address this? I was thinking about creating my own sprite map and then marking up the event divs in the calendar using jquery. But I am unsure as to how I would be able to identify which divs needed markup and which markup should be applied.

As an alternative maybe color code the text instead?

Thanks again for your help,
Chris

#2

Hi,
I think you can achieve this with scheduler templates, without jquery coding.
there are two templates for month view events:scheduler.templates.event_bar_date = function(start, end, ev){ return scheduler.templates.event_date(start)+" "; } scheduler.templates.event_bar_text = function (start,end,ev){ return ev.text; }
You may override them as you need, events are rendered like
event.innerHTML = scheduler.templates.event_bar_date(…) + scheduler.templates.event_bar_text(…)

#3

Thanks for the suggestion I will look into it. However, I think I will still have to make a call back to determine what type of flare is assigned.

So pull a list of {id,flareid} and then parse the event_pid in each event div to get the {id} to determine what/if flare is assigned. Then apply the appropriate class to each event div.

-Chris

#4

here is how I got the proof of concept running:
server side:

public ActionResult buildFlare(int? regionid) { regionid = regionid.HasValue ? regionid : 25; var flare = db.Events.Where(e => e.regionid == regionid && e.flareid != 0).Select(e=> new { event_id = e.id, flare_id = e.flareid }).ToList(); return Json(new { flare }, JsonRequestBehavior.AllowGet); }

Clientside:

[code]scheduler.attachEvent(“onXLE”, function () {
//any custom logic here
buildFlare();
});
$(‘div.dhx_cal_prev_button’).on(‘click’, function (e) {
buildFlare();
});
$(‘div.dhx_cal_next_button’).on(‘click’, function (e) {
buildFlare();
});
function buildFlare() {
$.get(‘@Url.Action(“buildFlare”,“BasicScheduler”)’, function (results) {
var evts = $(‘.dhx_cal_event_clear’);
for (i = 0; i < evts.length; i++) {
try {
var event = $(evts[i]).attr(‘event_id’);
var text = $(evts[i]).text();
for (j = 0; j < results.flare.length; j++) {
var event_id = event.split(“#”);
var flare_event_id = results.flare[j].event_id.toString();
if (event_id[0] == flare_event_id) {
switch (results.flare[j].flare_id) {
case 1:
$(evts[i]).prepend(‘<img src =“@Url.Content(”~/Content/Images/transparent.png")" class=“sprite flare greencheck” />’);
break;
case 2:
$(evts[i]).prepend(‘<img src =“@Url.Content(”~/Content/Images/transparent.png")" class=“sprite flare bluestar” />’);
break;
default:
break;
}
}

                 }
                 //$(evts[i]).prepend('<img src ="@Url.Content("~/Content/Images/transparent.png")" class="sprite flare greencheck" />');
             } catch (e) {
                 var breakme = "";
             }

         };
     });
 
 };[/code]

the CSS:

.sprite {background:url(images/calendarSprite.png);} .flare {height:13px; width:17px;} .greencheck {background-position:0px 0px;} .bluestar {background-position:0px 18px;} .redstar {background-position:0px 35px}

and the attached spritemap.

I figure that putting the inital flare load in

scheduler.attachEvent("onXLE", function () { //any custom logic here buildFlare(); });
is probably a bad move but I could not figure out where else to put it.

It is losing the flare after an event/series has been CRUD’d. I imagine when I figure out the correct place to put the initial flare load it will resolve that issue.

Any suggestions?

Thanks,
Chris

#5

Hello,
you may override render_data method, to call buildFlare each time events are rendered.

[code]
var _old_render = scheduler.render_data;
scheduler.render_data = function(){
_old_render.apply(scheduler, arguments);

        buildFlare();
    };
</script>[/code]

however, scheduler.render_data can be called multiple times during d’n’d operations, which will lead to huge ammount of ajax requests and dom operations with jquery. So you’ll have to limit it somehow.