slotLabelFormat, display a range

[urdhvatech]

Hello there,

First column on Calendar shows the time with different options like

h(:mm)a
H:mm

But I am unable to find an option which will make time appear with end time too.

Somewhere on stack overflow I found HH:mm { - HH:mm} but that doesn't work too.

With latest version of fullCalendar too, I found nothing.

[urdhvatech]

Anyone has some ideas for me please?

[arshaw]

if you set displayEventEnd to true, you will get the desired behavior
http://fullcalendar.io/docs/text/displayEventEnd/

[urdhvatech]

Thank you for your response, but that adds event end time to Event Title.
And I am looking for an option to show end time on Axis Time - The first column on Calendar showing the time slots.

I am looking for an option in http://fullcalendar.io/docs/agenda/slotLabelFormat/ to show the end time.

[arshaw]

oh ok. but usually the next slot underneath has the end time. so wouldn't you get something like this:

7:00-7:30
----------
7:30-8:00
----------
8:00-8:30

and isn't that a little redundant?

[urdhvatech]

Yes it looks redundant, but the user of the application needs the end time to show up like that. Is there a way to achieve that?

[arshaw]

that is currently not possible unfortunately. i can keep this ticket open in case other people need this feature

[urdhvatech]

Thank you for consideration.

[waleedarshad-vf]

Anyone working on this??? I need to this feature to add into my application as my application deals with booked appointments and we need to show slot duration from start time to end time.

[avdept]

Any news on this?

[arshaw]

no further development has happened on this.

this feature would be especially useful for Arbitrary differing slotMinutes increments.

when the API for this is tackled, best to fit in with universal naming conventions for html VS text and date VS range, mentioned here briefly. So maybe slotLabelRangeFormat to differentiate

[o15a3d4l11s2]

Are there any updates on this?

[leehan0617]

I add option like this,

$('#calendar').fullCalendar({
    // etcOption..
   slotLabelInterval : '00:30:00',
   viewSubSlotLabel : true,
});

and I change code in TimeGrid.js (start 84line)

axisHtml =
				'<td class="fc-axis fc-time ' + view.widgetContentClass + '" ' + view.axisStyleAttr() + '>' +
					(isLabeled ?
						'<span>' + // for matchCellWidths
							htmlEscape(slotDate.format(this.labelFormat)) +
					 		(view.opt('viewSubSlotLabel') ? '~' + 
							 htmlEscape(slotDate.add(30, 'minutes').format(this.labelFormat)) : '') +
						'</span>' :
						''
						) +
				'</td>';

if you are setting timerange 40 min ,
you must set

slotLabelInterval : '00:40:00',
slotDuration : '00:40:00'

and

axisHtml =
				'<td class="fc-axis fc-time ' + view.widgetContentClass + '" ' + view.axisStyleAttr() + '>' +
					(isLabeled ?
						'<span>' + // for matchCellWidths
							htmlEscape(slotDate.format(this.labelFormat)) +
					 		(view.opt('viewSubSlotLabel') ? '~' + 
							 htmlEscape(slotDate.add(40, 'minutes').format(this.labelFormat)) : '') +
						'</span>' :
						''
						) +
				'</td>';

more detail , I send full reqeust https://github.com/fullcalendar/fullcalendar/pull/3498

[SirDre]

Demo ref: http://www.cifullcalendar.com/v3

[jileilei]

slotLabelFormat, display a range is good options.i like this

[PHCCorso]

It'd be great to see this implemented. This would actually help me a lot, since the users of my application are asking for it.

[mbvb1223]

Yeah, my customer is asking me to do this feature :D

[mbvb1223]

calendar.setOption('slotLabelFormat', function (data) {
      return moment(data.date).format("HH:mm") + " ~ " + moment(data.date).add(60, 'minutes').format("HH:mm");
});

[vedantrajkul]

Hi I need this features.Please help

[timgonzo]

calendar.setOption('slotLabelFormat', function (data) {
      return moment(data.date).format("HH:mm") + " ~ " + moment(data.date).add(60, 'minutes').format("HH:mm");
});

Thank you! This was just what I needed.

[Mouad7181]

data.date

Hi friend ,

Please im looking to understand how did you get the data passed into the function , please im stack . thanks you