I am able highlight the current time in caledar using the below statement
Sched.Config.mark_now = true;
Now i am trying to show the calendar by scrolling it to current time instead of day start time. For example: if the current time is 4:00PM then user should directly view the 4:00 PM hour slot in calendar instead of 00:00. Could you please let me know how to achieve this.
Another issue, I would like differentiate working and non-working hours in a week with different colors. I am using blocktime option and defining this for each day. Is there any best way to define this.
you may override scheduler.setCurrentView method(javascript) var __old = scheduler.setCurrentView;
scheduler.setCurrentView = function (date, view) {
__old.call(scheduler, date, view);
if (date)
$('.dhx_cal_data').scrollTop(date.getHours() * 40);//where 40 is height of hour row
};
In current version you can’t mark time areas with different colors, this functionality is also planed for a next update
I tried the your code before initialization as shown below
function config() {//this function will be called before scheduler initialization
{
var __old = scheduler.setCurrentView;
scheduler.setCurrentView = function (date, view) {
__old.call(scheduler, date, view);
alert(date.getHours() * 40);
if (date)
$(’.dhx_cal_data’).scrollTop(date.getHours() * 40); //where 40 is height of hour row
};
}
But it is not working as expected. On further analysis, I noticed that current time is not also marking properly. I am using the below statement to show/mark the current time
sched.Config.mark_now = true;
I remember this was working in my earlier version.
Hi,
function still works for me(except that there is an extra ‘{’ in code you’ve posted).
When i press ‘Today’ button it scrolls view to the current time. However function can be slightly modified to use exact row height from scheduler configuration.
function config() {//this function will be called before scheduler initialization
var __old = scheduler.setCurrentView;
scheduler.setCurrentView = function (date, view) {
var hourSize = scheduler.config.hour_size_px;
__old.call(scheduler, date, view);
if (date)
$(’.dhx_cal_data’).scrollTop(date.getHours() * hourSize);
};
}
As for current time marker, it’s defined in Limit extension, so you have to attach it
sched.Extensions.Add(SchedulerExtensions.Extension.Limit);
I tried with below code and scroll bar is working fine when I click on Today button. But the calendar is not loading the events and saving the event to database. Could you please suggest how should I solve this issue.
The code shared by you to view the current time is working fine. As I informed you, the application is not loading the event data and also other configuration settings. Could you please look into this and let me know the solution.
Hi, id like to get that behaviour about set Current time in calendar because i dont have any time restriction, events can be selected from 00 to 23:59 so id like that when calendar is loaded view is scrolling to current clent time.
Where would i do add code?
function config()
{//this function will be called before scheduler initialization
var __old = scheduler.setCurrentView;
scheduler.setCurrentView = function (date, view)
{
var hourSize = scheduler.config.hour_size_px;
__old.call(scheduler, date, view);
if (date)
$('.dhx_cal_data').scrollTop(date.getHours() * hourSize);
};
}
I have tried to add it in file dhtmlxscheduler.js but it doesnt do anything
Hi,
this function need to be called before scheduler initialization. I wouldn’t recommend you to modify scheduler.js, because if it will be updated, you’ll have to apply all the changes again.
you may use this code as follows(there is slightly modified version of the script):
View:<script>
function updateTimeMark() {
var __old = scheduler.setCurrentView;
scheduler.setCurrentView = function (date, view) {
__old.call(scheduler, date, view); //call default behavior
//if current date within viewed timeframe- scroll down to current hour
if (+new Date() >= +scheduler._min_date && +new Date() <= +scheduler._max_date) {
var hourSize = scheduler.config.hour_size_px;
var calSize = $('.dhx_cal_data').innerHeight();
$('.dhx_cal_data').scrollTop(new Date().getHours() * hourSize - calSize / 2);
}
};
}
</script>
@Html.Raw(Model.Render())Controller:public ActionResult Index()
{
var sched = new DHXScheduler...
// call client-side function
sched.BeforeInit.Add("updateTimeMark();");
....
}
provided code does not contain mvc-specific solutions, code for web forms will be the same,
you need to
1)add js code to the page with scheduler
2)execute this code before scheduler initialization.
It can be done by wrapping the code into some function and then call this function using scheduler.BeforeInit - see blocks #1 and #2 from my previous post
or you may place this code between scheduler.GenerateJS and scheduler.GenerateHTML - see code block #3
methods
scheduler.GenerateJS() + scheduler.GenerateCSS() + scheduler.GenerateHTML()
all together will render the same markup as
scheduler.Render()