search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Add Button to Time Header

Asked by Mark
15 days ago.

I was wondering if it's possible to render a button in the time header for each column? I was successful in following the tutorial on JavaScript Scheduler Time Header Customization to add 30 minute markers (on a different Scheduler instance), but am stumped as to how to add a button. Can that be done?

Here's a portion of my Scheduler configuration:

vm.configWeekScheduler = {
scale: "Day",
days: 7,
startDate: new DayPilot.Date(),
timeHeaders: [
{ groupBy: "Month" },
{ groupBy: "Day", format: "d" }
],
onBeforeTimeHeaderRender: function (args) {
if (args.header.level === 1) {
args.header.areas = [];
args.header.areas.push({
???
});
}
},
...

Comment posted by Mark
14 days ago.

I was able to determine how to add a button to the Time Header simply by setting the html like so:

onBeforeTimeHeaderRender: function (args) {
if (args.header.level === 1) {
args.header.html = args.header.html + "<br/><a onclick='bookAll();'>Book</a>";
}
},

However, while the above works (the bookAll() function is called), I'm using angular and would like the following to work (which it doesn't):

onBeforeTimeHeaderRender: function (args) {
if (args.header.level === 1) {
args.header.html = args.header.html + "<br/><a ng-click='vm.bookAll();'>Book</a>";
}
},

Is there any way to trigger an angular method within my angular controller on the button click?

Answer posted by Dan Letecky [DayPilot]
13 days ago.

This doesn't work because the HTML doesn't get compiled using Angular. It looks like it might be possible to support it in the future it looks like it would also add a lot of overhead (the time header can have a lot of cells which need to be updated every time).

If you add the button as an active area instead you'll be able to specify a custom click handler using DayPilot (and reach other controller methods from there):

onBeforeTimeHeaderRender: function (args) { 
  if (args.header.level === 1) { 
    args.header.areas = []; 
    args.header.areas.push({ 
      left: 0, top: 0, html: "Book", style: "text-decoration: underline", onClick: function(args) { /* ... your code here ... */ }
    }); 
  }
} 
Comment posted by Mark
10 days ago.

Thank you for that, it works like a charm. I ended up with this:

onBeforeTimeHeaderRender: function (args) {
if (args.header.level === 1) {
args.header.html = args.header.start.toString("htt").toLowerCase(); // Format time display
args.header.areas = [];
args.header.areas.push({
left: 6, html: "<br/><button class='btn btn-default btn-xs'> Book </button>", onClick: function (args) { vm.bookAll(); }
});
}
},

Question...I had trouble centering the button within the header cell. Ended up setting left: 6. Is there a better way?

New Reply
This reply is
Your name (optional):