Hi, I have a year view view in my appliaction.
What I see is 1 column by 12 month row.
But the thing is that I see only 3 month at a time and I have to scroll down to see more moth and it’s ok like that. But what I wanna do is to be able to see the actual month as the first month in view.
So instead of starting the list at January and Having to scroll down to december for instance. If we are in december in real life, I would like to see december as my first month and then scroll down for future months.
Is is possible in year view to start by a different month than January.
tks
Seby
add code like next before scheduler.init
scheduler.date.year_start = function(date){
date.setMonth((new Date()).getMonth());
return this.month_start(date);
};
Hi stanislav, tks for the answer. I tried I think almost every place to paste your code. Can you tell me where exactly I have to put it please?
Here’s my code
Tks
Seby
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//$(document).ready(function(){
//$('.dhx_combo_input').bind('click', function() {
//alert("1");
//});
//});
</script>
<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_year_view.js"></script>
<script src='../../codebase/ext/dhtmlxscheduler_minical.js' type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/ext/dhtmlxscheduler_ext.css" type="text/css">
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css">
<script src="../../codebase/ext/dhtmlxscheduler_editors.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxcombo/codebase/dhtmlxcombo.css">
<script src="../../codebase/dhtmlxcombo/codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxcombo/codebase/dhtmlxcombo.js"></script>
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
<script type="text/javascript" charset="utf-8">
function mycheckfun(rd)
{
//alert("hello");
//alert(rd);
}
function show_minical(){
if (scheduler.isCalendarVisible())
scheduler.destroyCalendar();
else
scheduler.renderCalendar({
position:"dhx_minical_icon",
date:scheduler._date,
navigation:true,
handler:function(date,calendar){
scheduler.setCurrentView(date);
scheduler.destroyCalendar()
}
});
}
function init() {
///////////////////-------------added by sushma ////////////////
var sections=[
{key:'Business', label:"Business"},
{key:'Quote', label:"Quote"},
{key:'Personal', label:"Personal"}
];
scheduler.locale.labels.unit_tab = "Unit"
scheduler.locale.labels.section_custom="Select";
scheduler.config.multi_day = true;
scheduler.config.auto_end_date = true;
scheduler.config.event_duration = 60;
scheduler.config.first_hour=4;
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.prevent_cache = true;
/////////////////////////////////////////////////////////////
scheduler.config.lightbox.sections=[
{name:"session", height:20, map_to:"session_name", type:"textarea" , focus:true},
{name:"type", height:20, type:"select", options:sections, map_to:"type" },
{name:"subtype", height:20, type:"select", map_to:"session_type",options:scheduler.serverList("session_type") },
{name:"clients", map_to:"client_id", type:"combo", image_path: "../../codebase/dhtmlxcombo/codebase/imgs/", filtering: true, script_path: "php/complete.php", cache: true },
{name:"place", height:20, type:"textarea", map_to:"session_location" },
{name:"time", height:70, type:"calendar_time", map_to:"auto"},
{name:"notes", height:80, type:"textarea", map_to:"session_notes" }
]
scheduler.locale.labels.section_session="Event Name";
scheduler.locale.labels.section_notes="Notes";
scheduler.locale.labels.section_type="Type";
scheduler.locale.labels.section_subtype="Sub Type";
scheduler.locale.labels.section_place="Place";
scheduler.locale.labels.section_clients="Clients";
//top label of calendar
scheduler.templates.calendar_month = scheduler.date.date_to_str("%F %Y");
//week label of calendar
scheduler.templates.calendar_scale_date = scheduler.date.date_to_str("%D");
//date value on the event's details form
scheduler.templates.calendar_time = scheduler.date.date_to_str("%d-%m-%Y");
scheduler.templates.event_class = function(s,e,ev){
if (ev.type == 'Personal') return "Personal";
if (ev.type == 'Business') return "Business";
if (ev.type == 'Quote') return "Quote";
return "";
}
//scheduler.locale.labels.section_radiotype="Select";
//scheduler.config.details_on_create=true;
//scheduler.config.details_on_dblclick=true;
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',new Date(curr_year,curr_month,1),"year");
scheduler.setLoadMode("year");
scheduler.load("php/events.php");
var dp = new dataProcessor("php/events.php");
dp.init(scheduler);
}
</script>
<body onload="init();">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()"> </div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
<div class="dhx_cal_tab" name="year_tab" style="right:12px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>Replace the next line in your code
scheduler.init('scheduler_here',new Date(curr_year,curr_month,1),"year");as
scheduler.date.year_start = function(date){
date.setMonth((new Date()).getMonth());
return this.month_start(date);
};
scheduler.init('scheduler_here',new Date(curr_year,curr_month,1),"year");
Yep working, that does the trick.
tks
Have a nice day
Seby