`
Page
1
of
28
E2CS event calendar alpha 0.0.4 reference manual
E2CS
E
vent Calendar
(
A
lpha
version
0.0.
6
–
Beta 0.0.1
)
Reference
Manual
ver.
0.0.1
Homepage:
http://e2cs.mm
-
mendez.com/
(Homepage still
on development
and not released yet
)
Translations credits:
English
version
: Carlos Mendez
–
cmendez21@gmail.com
Any person who would like to translate please take this document as the starting point.
(Word 07 version
for
modifications or translations
available for download on the site
, meanwhile the site is up please contact us to send you a copy for the word doc only.
)
Also Author’s credits will be set in the E2CS home page (manual page)
Notes:
This is the first revision and initial documentation on
the e2cs calendar widget so many features or documentation may be still missing so we
apologize for this and we appreciate all your reports about this issue thanks..!
CONTENTS
Class Ext. ECalendar
Class Ext. ECalendar.monthview
Class Ext.
ECalendar.dayview
Class Ext. ECalendar.weekview
Notes about this widget
FAQ’s
Locale files Translation credits
History Log
`
Page
2
of
28
E2CS event calendar alpha 0.0.4 reference manual
Class Ext. ECalendar
Package:
Ext.Ecalendar
Defined In:
calendar.js
Class:
ECalendar
Extends:
ExtJs.
Panel
This class represents the primary interface of a calendar component control.
Config Options
id:
String
The unique id of this
component.
title:
String
The title text to display
in the panel header (defaults to ''). When a title is specified the header element will
automatically be created and displayed unless
header
is explicitly set to false. If y
ou don't want to specify a title at
config time, but you may want one later, you must either specify a non
-
empty
title (a blank space ' ‘
will do) or
header: true
so that the container element will get created.
NOTE: title and mytitle properties work togeth
er as a result that the concatenation of both will form the calendars
title
mytitle:
String
Complementary text to display in the panel header
(see title config property)
showCal_tbar
Boolean
True to show the calendar’s main toolbar. Default is true.
showRefreshbtn:
Boolean
(
added on alpha 0.0.2
)
True to show the refresh button on the control’s header. Default is true.
currentView: String
Sets the default view at control creation write one of the following options
m
onth
,w
eek
,
day
Example:
curre
ntView:’month’
`
Page
3
of
28
E2CS event calendar alpha 0.0.4 reference manual
currentdate:
Date
Sets the actual date which the control will handle as today (JavaScript date object, defaults to current Date).
dateSelector:
Boolean
True to show the Date picker on the calendar’s toolbar. Default is false.
dateSelectorIcon:
String
The path to an image to display in the selector (date picker) . Defaults
to ‘’
.
dateSelectorIconCls: 'selector'
,
removed
on alpha 0.0.4
cause: no use at all
dateformat:
String
The default date format string which can be overri
dden for localization support. The format must be valid
according to Date.parseDate (defaults
to ’d
-
m
-
Y').
widget
s
Bind: Object
(
will be functional on
alpha 0.0.
5
)
Config object which applies for each view binding control(s) be
haviors to change automatically
without need of
event
handling
.
widgetBind: {
bindMonth:null,
// another calendar object/instance
bindDay:null,
// another calendar object/instance
binWeek:null
// another calendar object/instance
},
Note the
instance of the controls must be the same
type of control (
Ecalendar
)
`
Page
4
of
28
E2CS event calendar alpha 0.0.4 reference manual
tplTaskTip : Ext.XTemplate
Object
( added on alpha 0.0.
4
)
Ext.XTemplate Object which the calendar will use to display
the qtip of the events
(
day view and week view
)
Note:
the parameters in the XTemplate object must be the same as the code shown in default value.
Defaults to:
tplTaskTip : new Ext.XTemplate(
'<tpl for=".">{starxl}{
startval}<br>{endxl}{endval}<hr
>{details}</tpl>'
)
tplTaskZoom: Ext.XTemplate Object
( a
dded on alpha 0.0.3)
Ext.XTemplate Object which the calendar will use to display event list (month view)
tplTaskZoom: new Ext.XTemplate(
'<tpl for=".">',
'<div class="ecal
-
show
-
basetasktpl
-
div">T
ask
:{subject}<br>',
'
Starts
:{startdate}<br>
Ends
:{enddate}<br>Descrip
t
ion:<br>{description}<div><hr>',
'</tpl>'
)
iconToday: String
The path to an image to display in the Today button located at the calendar’s toolbar. Defaults to ‘’.
iconMonthView: String
The path to an image to display in th
e Month view button located at the calendar’s toolbar. Defaults to ‘’.
iconWeekView: String
The path to an image to display in the Week view button located at the calendar’s toolbar. Defaults to ‘’.
`
Page
5
of
2
8
E2CS event calendar alpha 0.0.4 reference manual
iconDayView: String
The path to an image to display i
n the Day view button located at the calendar’s toolbar. Defaults to ‘’.
mview: Object
Configuration object for month view (see Class Ext. ECalendar.monthview)
dview: Object
Configuration object for day view (see Class Ext. ECalendar.dayview)
wview: Obj
ect
Configuration object for week view (see Class Ext. ECalendar.weekview)
store: Ext.data.Store
The Ext.data.Store the calendar should use as its data source (required).
Public Properties
viewmonth: Object
access to month view’s methods, properties
here
viewday: Object
access to day view’s methods, properties here
viewweek: Object
access to week view’s methods, properties here
Methods
setNewDate
(
Date
newdate)
Manually sets a new date for the calendar, according to the view the calendar will react
and refresh.
Parameters:
newdate:
A valid date object
(JavaScript date object / Ext.Date)
`
Page
6
of
28
E2CS event calendar alpha 0.0.4 reference manual
changeView
(string newview
){
Change the calendar’s current view to the new specified
.
Parameters:
newview: write one of the following to change the current
view:
month
day
week
Note:
When calling this method the event
beforeChangeView
will be triggered and after finishing will trigger the event
onChangeView
(see event reference).
Note2:
if the current view equals to the new
view then a refresh will be done.
getViewMonth()
: Object
Returns the month view object from the calendar.
getViewDay()
: Object
Returns the day view object from the calendar.
getViewWeek()
: Object
Returns the week view object from the calendar.
goNextMonth
(),
removed on alpha 0.0.4 cause:
no use/ functionality at all
goPrevMonth
(),
removed on alpha 0.0.4 cause: no use/ functionality at all
getCalendarMonth
()
:
integer
Returns the month from the calendar’s current date.
getCalendarYear
()
:
integer
R
eturn
s the year from the calendar’s current d
ate.
getCalendarDay
()
:
integer
R
eturn
s the day’s number f
rom the calendar’s current date
g
etCalendayWeekDay(string
dataformat)
Returns the day of the week from the calendar’s current date.
Parameters:
Dataformat:
if dataformat=’str’ then
will return the
name of the day (Monday, Thursday, Wednesday and so on)
Anything else will return the number of the week day
`
Page
7
of
28
E2CS event calendar alpha 0.0.4 reference manual
dateDiff (date1, date2, interv
al) :integer
Returns the difference between 2 date objects according to the interval
Parameters:
Date1: A valid
date object (JavaScript date object / Ext.Date)
Date2: A valid date object (JavaScript date object / Ext.Date)
Interval: a value according to e2cs.dateParts
e2cs.dateParts={
YEAR: 0,
MONTH: 1,
DAY: 2,
HOUR: 3,
MINUTE: 4,
SECOND: 5,
MILLISECOND
: 6,
QUARTER: 7,
WEEK: 8,
WEEKDAY: 9
};
Example:
var tesdifft= calendar.dateDiff(new Date(starttime),new Date(endtime),e2cs.dateParts.HOUR);
Note: this function was taken from
DOJO toolkit
Date object
and mad
e some modifications to make it work on extjs.
Events
onRefresh: (calendarobj)
Fires
after the calendar has been refreshed. (by pressing the refresh button)
Listeners will be called with the following arguments:
calendarobj
:
instance object of the
calendar
beforeChangeView: (newview,currentview,calendarobj)
Fires
before changing
calendar’s current view
(by pressing the
change view buttons or in the context menus the
change view buttons
)
Listeners will be called with the following arguments:
newview
:
string with the name of the new view (day, week, month)
currentview
:
string with the name of the current view that the calanedar has (day, week, month)
calendarobj
:
instance object of the calendar
Return false to cancel the change of view, true to contin
ue
`
Page
8
of
28
E2CS event calendar alpha 0.0.4 reference manual
onChangeView
: (newview,oldview,calenda
r
obj)
Fires
after changing calendar’s current view (by pressing thechange view buttons or in the context menus the
change view buttons)
Listeners will be called with the following arguments:
newview
:
string with the
name of the current view (day, week, month)
currentview
:
string with the name of the old view that the calanedar had (day, week, month)
calendarobj
:
instance object of the calendar
beforeChangeDate: (newDate, calendarObj)
Fires
before changing the date o
n the calendar (
setNewDate
function)
Listeners will be called with the following arguments:
newview
:
date object
calendarobj
:
instance object of the calendar
afterChangeDate: (newDate, calendarObj)
Fires
after changing the date on the calendar (
setNewDate
function)
Listeners will be called with the following arguments:
newview
:
new date value set to the calendar
calendarobj
:
instance object of the calendar
customMenuAction: (MenuID, view, taskObj,ViewEl, calendarobj)
Fires
When the user
clicks a custom menu item added to the context menu (any view)
Listeners will be called with the following arguments:
MenuID:
the id of the custom menu item clicked
View:
string with the view name of where it was clicked
taskObj:
event/task object with a
ll its values
ViewEl:
the element from which was clicked
calendarobj
:
instance object of the calendar
Note
:
W
hen view=’month’
taskObj
will be
:
taskObj=[
date,
//date of the day on which was triggered the action
type
//see reference
below
]
`
Page
9
of
28
E2CS event calendar alpha 0.0.4 reference manual
Reference
for type
noday
//when the day displayed does not belong to the current month
today
//When the day represents the current day to handle (as today or selected day in delector)
monthday
//When it’s a day in the month different than the current date to handl
e
And when view its day or week taskObj will be
:
taskObj=[
id,
//id of the event (record id)
ec_id,
//
id generated by the calendar object
subject,
//event’s subject/title
starts,
//start date/time
ends,
//End date/time
description,
//event descri
ption
storeindex
//store index number
]
taskAdd
: (
o
ndate)
Fires
after changing the date on the calendar (
setNewDate
function)
Listeners will be called with the following arguments:
indate
:
date value (date object) in which the event (task) add button was
clicked
taskDblClick: (taskObj, viewObj, calendarObj, stringviewName)
Fires
when the user
makes a
d
ouble
click on the event
/ task
Listeners will be called with the following arguments:
taskObj
:
Task object/array on which comes all the values related to
the event(task) in the following order:
taskObj=[
recordno,
//record generated on the calendar (dom element id)
id,
// record id (recordset, dataset)
subject,
//event’s (task’s) subject
starts
,
// date time w
h
ich the event starts
ends
,
// date time
which the events ends
contents
//description of the task
index
//extjs store index
]
viewObj
:
view object on which the event was generated (day or week)
calendarobj
:
instance object of the calendar
stringviewName
:
string
with the value of the current
view or the view in which was originated the event.
`
Page
10
of
28
E2CS event calendar alpha 0.0.4 reference manual
beforeTaskMove: ( taskObj, taskClass, dayviewObj,
calendarObj)
Fires
when the user makes resizable on the event/task or a drag drop (only on day view)
Listeners will be called with the following
arguments:
taskObj
:
Task object/array on which comes all the values related to the event(task) in the following order:
taskObj=[
id,
//id of the event (record id)
ec_id,
//id generated by the calendar object
subject,
//event’s subject/title
starts,
//start date/time
ends,
//End date/time
description,
//event description
storeindex
//store index number
]
taskClass:
Task Object (task class) for reference
(haven’t find something useful to do with this parameter)
dayviewObj:
day view object referen
ce
calendarobj
:
instance object of the calendar
Return false to go ahead and let the calendar made the modification on the event , return True to cancel
modification
.
TaskMoved (newTaskdata, taskClass, dayviewObj,calendarObj)
Fires when the event has been
allowed to modify its properties by resizable or drag drop
Listeners will be called with the following arguments:
newTaskData
:
Task object/array on which comes all the values updated according to the change made,
the event(task) values comes in the follo
wing order:
taskObj=[
id,
//id of the event (record id)
ec_id,
//id generated by the calendar object
subject,
//event’s subject/title
starts,
//start date/time
ends,
//End date/time
description,
//event description
storeindex
//store index number
]
taskClass:
Task Object (task class) for reference
(haven’t find something useful to do with this parameter)
dayviewObj:
day view object reference
calendarobj
:
instance object of the calendar
`
Page
11
of
28
E2CS event calendar alpha 0.0.4 reference manual
beforeTaskDelete (taskObjtoDel, dayviewObj)
Fires
before
the events is going to be erased (click on “delete task” on the context menu)
Listeners will be called with the following arguments:
taskObjtoDel
:
Task object/array on which comes all the values that is going to be erased by the user. The
event(task)
values comes in the following order:
taskObj=[
id,
//id of the event (record id)
ec_id,
//id generated by the calendar object
subject,
//event’s subject/title
starts,
//start date/time
ends,
//End date/time
description,
//event description
storeindex
//store index number
]
dayviewObj:
day view object reference
Return false to continue,
return
True to cancel
onTaskDelete
(taskObjtoDel)
Fires if the beforeTaskDelete event was not canceled. Here in this event you can code all the necessary st
uff to
delete the record from the database or array etc.
Return true if the deletion of the record was successful or false if aborted or cant delete the record.
Listeners will be called with the following arguments:
taskObjtoDel
:
Task object/array on which
comes all the values that is going to be erased by the user. The
event(task) values comes in the following order:
taskObj=[
id,
//id of the event (record id)
ec_id,
//id generated by the calendar object
subject,
//event’s subject/title
starts,
//start date/time
ends,
//End date/time
description,
//event description
storeindex
//store index number
]
`
Page
12
of
28
E2CS event calendar alpha 0.0.4 reference manual
afterTaskDelete
(taskObjtoDel, Deleteaction)
Fires
after the onTaskDelete event.
Listeners will be called with the following arguments:
taskObjtoDel
:
Task object/array on which comes all the values that is going to be erased by the user. The
event(task) values comes in the following order:
taskObj=[
id,
//id of the event (record id)
ec_id,
//id generated by the calendar object
subject,
//event’s subject/title
starts,
//start date/time
ends,
//End date/time
description,
//event description
storeindex
//store index number
]
NOTE: if the previous event was aborted then taskObjtoDel is a null object
Deleteaction
:
Boolean value, true
if deletion of the record can be made, false if aborted for some reason
beforeTask
Edit
(taskObjto
Edit
, dayviewObj)
Fires
before the events is going to be edited (click on “edit task” on the context menu)
Listeners will be called with the following argument
s:
taskObjtoEdit
:
Task object/array on which comes all the values that is going to be edited by the user. The
event(task) values comes in the following order:
taskObj=[
id,
//id of the event (record id)
ec_id,
//id generated by the calendar object
subject,
//event’s subject/title
starts,
//start date/time
ends,
//End date/time
description,
//event description
storeindex
//store index number
]
dayviewObj:
day view object reference
Return false to continue,
return
True to cancel
`
Page
13
of
28
E2CS event calendar alpha 0.0.4 reference manual
onTask
Edit
(taskObjto
Edit
)
Fires if the beforeTask
Edit
event was not canceled. Here in this event you can code all the necessary stuff to
edit
the record from the database or array etc.
Return true if the
editing
of the record was successful or false if aborted
or can’t
edit
the record
(or canceled)
.
Listeners will be called with the following arguments:
taskObjtoEdit
:
Task object/array on which comes all the values that is going to be edited by the user. The
event(task) values comes in the following order:
taskO
bj=[
id,
//id of the event (record id)
ec_id,
//id generated by the calendar object
subject,
//event’s subject/title
starts,
//start date/time
ends,
//End date/time
description,
//event description
storeindex
//store index number
]
afterTask
Edit
(
taskObjto
Edit
,
Edit
action)
Fires
after the onTaskEdit event.
Listeners will be called with the following arguments:
taskObjtoEdit
:
Task object/array on which comes all the values that were edited by the user. The
event(task) values comes in the following
order:
taskObj=[
id,
//id of the event (record id)
ec_id,
//id generated by the calendar object
subject,
//event’s subject/title
starts,
//start date/time
ends,
//End date/time
description,
//event description
storeindex
//store index number
]
NOT
E: if the previous event was aborted then taskObjtoEdit is a null object
Editaction
:
Boolean value, true if editing was successful, false if aborted for some reason
`
Page
14
of
28
E2CS event calendar alpha 0.0.4 reference manual
Class Ext. ECalendar.monthview
Package:
Ext.Ecalendar
Defined In:
monthview.js
Class:
ECalendar
.monthview
This class represents the
month view interface on the calendar control
Config Options
The config options will be set as an object in a variable or inside the calendar config
uration
.
Sample:
mview:{
header: true,
headerFormat:'F
-
Y',
headerButtons: true,
dayAction:'viewday',
showTaskcount: true,
taskStyle:'margin
-
top:10px;'
moreMenuItems:[buttonx1,buttonx2],
}
header: Boolean
True to show the month view’s header. Default is true.
headerFormat: String
The default date format string which can be overridden for localization support. The format must be valid
according to
Date.parseDate
(defaults to 'M
-
Y').
headerButtons:
Boolean
True to show the month view’s header’s buttons. Default is true.
The buttons in the month’s header are:
Next month
Previous month.
`
Page
15
of
28
E2CS event calendar alpha 0.0.4 reference manual
dayAction:
String
String format to define the action when the user clicks on a specific day (see
ZoomDay met
hod)
The options are:
o
viewday
(set the view in the calendar for that day)
o
event
(raise Event dayClick)
o
window
(shows a window with a list of occurring day's events using the tplTaskZoom property to display all the
events, if t
here is/are no event(s) no action will be taken).
o
none or null
(do nothing )
showTaskcount: Boolean
True to show the events count on each day if the day has events. Default is true.
taskStyle: String
An optional extra CSS string using standard CSS rules that will be added to the event’s div tag (defaults to ''). This
can be useful for adding customized styles to the events div tag when
showTaskcount
is set to true.
moreMenuItems: Array
A Mixed
Collection of Menu's items for the context menu
Sample:
moreMenuItems:[buttonx1,buttonx2]
Sample2:
moreMenuItems:[
new Ext.menu.Item({ id: 'buttonx1_task', iconCls:'x
-
calendar
-
month
-
btnmv_task', text: "Custom menu test 1" }),
new Ext.menu.Item({ id:
'buttonx2_task',iconCls:'x
-
calendar
-
month
-
btnmv_task',text: "Custom menu test 2" })
]
Methods
ZoomDay (string datetozoom):
Boolean
Shows a Window list of all the events
occurring in
that specific day. Also uses the
tplTaskZoom
property from the
calendar
object to render each event in to the Window list.
Parameters:
datetozoom
: string parsed in format in d/m/Y
Returns:
True
if there’s any event to show in the window list that shows the function. If no events for the selected
day then returns
False.
`
Page
16
of
28
E2CS event calendar alpha 0.0.4 reference manual
Events
dayClick
: ( dateparam , monthview ,calendar)
Fires when the user clicks on a day in the month view and also the month view config property
dayAction
="event"
Listeners will be called with the following arguments:
dateparam:
a date object
example va
lue: Mon Aug 18 2008 00:00:00 GMT
-
0700 (Pacific Daylight Time)
monthview
: the instance of the current month view object
calendar
: the instance of the current calendar control
beforeMonthChange
( currentdate, newdate)
Fires when the user clicks on the
next month
or
previous month
buttons located on the month view’s header.
Return false to let the calendar change month else true for cancel
.
Listeners will be called with the following arguments:
currentdate
: date object w
ith the value of the current date on the calendar
newdate
: date object with the new value of the current date on the calendar
Notes:
as an example if the current date on the calendar is 08/31/2008 (31
-
august
-
2008) and change to the next month the date
that the
calendar will set as new will be 09/30/2008 (30
-
september
-
2008)
afterMonthChange
(newdate)
Fires after the calendar changes the displayed
month (
next or previous)
.
Listeners will be called with the following arguments:
newdate
: date object
with the new value set as current date on the calendar.
`
Page
17
of
28
E2CS event calendar alpha 0.0.4 reference manual
Class Ext. ECalendar.
day
view
Package:
Ext.Ecalendar
Defined In:
day
view.js
Class:
ECalendar.
day
view
This class represents the
daily view (for each day)
interface on the calendar control
Config Options
The config options will be set as an object in a variable or inside the calendar configuration.
Notes: it may differ from browser
(IE, FIREFOX and OPERA)
some UI aspects.
dview:{
header:true,
headerFormat:'l
-
d
-
F
-
Y',
headerButtons:
true,
hourFormat: 'G',
startTime: '07:00:00 am',
endTime: '10:00:00 pm',
task_format:'d
-
m
-
Y H:i:s a',
taskBaseColor: '#ffffff',
useMultiColorTasks: false,
multiColorTasks:[],
tasks:[],
moreMenuItems:[
boton_daytimertask,
boton_daytimertaskb
]
}
header:
Boolean
True to show the month view’s header. Default is true.
headerFormat: String
The default date format string which can be overridden for localization support. The format must be valid
according to
Date.parseDate
(defaults to '
l
–
d
–
F
-
Y
').
`
Page
18
of
28
E2CS event calendar alpha 0.0.4 reference manual
headerButtons: Boolean
True to show the month view’s header’s buttons. Default is true.
The buttons in the month’s header are:
Next
day
Previous
day
.
hourFormat:
String
The default date
(time)
format string which can be overridden for localization support. The format must be valid
according to
Date.parseDate
(defaults to '
G
').
startTime
:
String
The default date
(time)
format string which can be overridden for localization support. The format must be valid
according to
Date.parseDate
(defaults to
'
7:00:00 am
').
endTime
:
String
The default date
(time)
format string which can be overridden for localization support. The format must be valid
according to
Date.parseDate
(d
efaults to '
7:00:00 am
').
moreMenuItems: Array
A Mixed Collection of Menu's items for the context menu
(see notes)
Sample:
moreMenuItems:[buttonx1,buttonx2]
Sample2:
moreMenuItems:[
new Ext.menu.Item({ id: 'buttonx1_task',
iconCls:'x
-
calendar
-
month
-
btnmv_task', text: "Custom menu test 1" }),
new Ext.menu.Item({ id: 'buttonx2_task',iconCls:'x
-
calendar
-
month
-
btnmv_task',text: "Custom menu test 2" })
]
Note: this view has 2 context menus the first one it’s when the users righ
t click over the grid (body of the day) which has the
standard options and the second one it’s when the users right click over the tasks this property applies to the second one.
taskBaseColor:
String
Base color for events on the day view, the format has t
o be on
hex
adecimal color code, defaults to ‘#ffffff’
For more information about color codes please check:
http://www.quackit.com/html/hex_color_codes.cfm
task_width: Int
number
,
Width
which the events/tasks will have inside the view (defaults to 50)
task_f
ormat: String
(added on alpha 0.0.4 missing property)
This format will be applied to the
Events/Tasks
qtip
property formatting
time values (
S
tarts / Ends)
.
The default date format string which can be overridden for localization support. The format must be valid
according to
Date.parseDate
(defaults to '
d
-
m
-
Y H:i:s a').
`
Page
19
of
28
E2CS event calendar alpha 0.0.4 reference manual
task_sh
owqtip:
Boolean
True to show the
qtip (tooltip) for the Event/Task when mouse over
. Default is true.
Note: this property uses tplTaskTip defined on the calendar object.
t
ask_increment:
Int Number
,
Height increment for resizable events/tasks
, it’s the
heightIncrement resizable
object
property
.
Sample: task_increment:5
Debug task 6 starts at 9:15 am and ends on 11:30 am.
With this property when resizing snaps at 5 minutes later so it will
end at 11:35 am.
useMultiColorTasks: Boolean
// not implemented yet
multiColorTasks: Array
// not implemented yet
task_clsOver:'',
// not implemented yet
tasksOffset:'auto',
//
not implemented yet
Methods
refreshView
(
)
Refreshes the current day view on the calendar object.
`
Page
20
of
28
E2CS event calendar alpha 0.0.4 reference manual
Events
beforeDayChange: (currentDate
, newDate
)
Fires when the user clicks on the view’s header’s buttons
for previous day or next day also the context menu items
to move backwards or forwards.
Listeners will be called with the following arguments:
currentDate
:
a
date object
newDate
: the instance of the current month view object
example value: Mon Aug 18 2008 00:00:00 GMT
-
0700 (Pacific Daylight Time)
Return False to Go ahead or True to cancel the date change.
after
DayChange: (newDate)
Fires when the user
/fun
ction
has allowed to change date on the calendar (day).
Listeners will be called with the following arguments:
newDate
: the instance of the current month view object
example value: Mon Aug 18 2008 00:00:00 GMT
-
0700 (Pacific Daylight Time)
`
Page
21
of
28
E2CS event calendar alpha 0.0.4 reference manual
Class E
xt. ECalendar.
week
view
Package:
Ext.Ecalendar
Defined In:
week
view.js
Class:
ECalendar.
week
view
This class represents the weekly view (for each day) interface on the calendar control this interface divides in 2
parts the first one has events that
last more than a day and the 2nd one has the task that are properly of a day or
less than a day.
Config
uration
Options
The config
uration
options will be set as an object in a variable or inside the calendar configuration.
Notes: it may differ from browse
r (IE, FIREFOX and OPERA) some
minimal
UI aspects.
wview:{
header:true,
headerButtons: true,
headerFormat: 'W',
headerShowDates: true,
dayformatLabel:'D j',
moreMenuItems:[buttonx1,buttonx2],
style: 'google',
alldayTaksMore:'w
indow',
alldayTasksMaxView:3,
store: null,
alldayTaskTPL: new Ext.XTemplate(
'<tpl for=".">',
'<div class="ecal
-
show
-
basetasktpl
-
div">Tarea:{subject}<br>',
'Inicia:{startdate}<br>Termina:{enddate}<br>Descripcion:<br>{description}<div
><hr>',
'</tpl>'
),
task_format:'d
-
m
-
Y H:i:s a',
task_bgcolor_base:'#E0FFA2',
task_showqtip: true,
task_width:40,
tasksOffset:20
}
`
Page
22
of
28
E2CS event calendar alpha 0.0.4 reference manual
header:
Boolean
True to show the
weeks
view’s header. Default is true.
headerFormat: String
The default date format string which can be overridden for localization support. The format must be valid
according to
Date.parseDate
(defaults to '
W
').
headerButtons: Boolea
n
True to show the
weeks
view’s header’s buttons. Default is true.
The buttons in the month’s header are:
Next
week
Previous
week
.
This action will trigger the events beforeWeekChange and afterWeekChange
headerShowDates: Boolean
True to show date ranges
for the week (
From
/
To
)
as shown in the image.
dayformatLabel
: String
String format for the headers on each day in the week view,
The default date format string which can be overridden for localization support. The format must be valid
according to
Date.parseDate
(defaults to '
D j').
moreMenuItems: Array
A Mixed Collection of Menu's items for the context menu
(see notes)
Sample:
moreMenuItems:[buttonx1,buttonx2]
S
ample2:
moreMenuItems:[
new Ext.menu.Item({ id: 'buttonx1_task', iconCls:'x
-
calendar
-
month
-
btnmv_task', text: "Custom menu test 1" }),
new Ext.menu.Item({ id: 'buttonx2_task',iconCls:'x
-
calendar
-
month
-
btnmv_task',text: "Custom menu test 2" })
]
Note:
this view has 2 context menus the first one it’s when the users right click over the grid (body of the day) which has the
standard options and the second one it’s when the users right click over the tasks this property applies to the second one.
`
Page
23
of
28
E2CS event calendar alpha 0.0.4 reference manual
style
:
String
Sets the default
style for the
view at control creation write one of the following options
plain or
google
See differences:
Google style
Most stable style
Plain style
Warning: plain view is still on development (many bugs to repair
and
tes
ts on browsers IE6,IE7, FF2, FF3, OPERA
)
alldayTasksMaxView
: Int
number
,
The number of task to show on the all day tasks section (Top section from the view)
Sample with property set to
alldayTasksMaxView:3
Note if more tasks had to be added a special text will appear above to point there are more task
Sample with property set to
alldayTasksMaxView:
2
alldayTaksMore:
String
String format to define the action when the user clicks on a specific day (see
ZoomDay method)
The options are:
o
event
(raise Event dayClick)
o
window
(shows a window with a list of occurring day's events using the
alldayTaskTPL
property to display all the
events, if there is/are no event(s) no action will be taken
).
o
none or null
(do nothing )
`
Page
24
of
28
E2CS event calendar alpha 0.0.4 reference manual
alldayTaskTPL:
Ext.XTemplate Object
( added on alpha 0.0.3)
Ext.XTemplate Object which the
week view
wil
l use to display event list when the user clicks if there are more task
that lasts more than one day.
alldayTaskTPL
: new Ext.XTemplate(
'<tpl for=".">',
'<div class="ecal
-
show
-
basetasktpl
-
div">
Event
:{subject}<br>',
'
Starts
:{startdate}<br>
Ends
:{enddate}<br>Descrip
t
ion:<br>{description}<div><hr>',
'</tpl>'
),
task_width:40,
tasksOffset:20
task_f
ormat: String
This format will be applied to the
Events/Tasks
qtip
property formatting
time values (
S
tarts / Ends)
.
The default date format string which can be overridden for localization support. The format must be valid
according to
Date.parseDate
(defaults to '
d
-
m
-
Y H:i:s a').
Task
_
bgcolor_base
:
String
Base color for events on the week view, the format has to be on
hex
adecimal color code, defaults to ‘#ffffff’
For more information about color codes please check:
http://www.quackit.com/html/hex_color_codes.cfm
task_showqtip:
Boolean
True to show the
qtip (tooltip) for the Event/Task when mouse o
ver
. Default is true.
Note: this property uses tplTaskTip defined on the calendar object.
task_width: Int
number
,
Width which the events/tasks will have inside the view (defaults to 50)
tasksOffset:'auto',
// not implemented yet
`
Page
25
of
28
E2CS event calendar alpha 0.0.4 reference manual
Methods
refreshView
(
)
Refreshes the current day view on the calendar object.
Events
launchEventList
: (object Array)
F
ires
when the user clicks on the legend “Show more all day tasks…” and the property
alldayTaksMore equals to
“event”.
Listeners will be called
with the following arguments:
Object array
:
a
n array objects/arrays which contains the data in the following order:
Objarray[0] = [
Id,
Subject,
Description,
Startdate,
Enddate,
Color
]
before
Week
Change: (currentDate, newDate)
Fires when the user clicks
on the view’s header’s buttons
for previous week or next week also the context menu
items to move backwards or forwards.
Listeners will be called with the following arguments:
currentDate
:
a date object
newDate
: the instance of the current month view object
example value: Mon Aug 18 2008 00:00:00 GMT
-
0700 (Pacific Daylight Time)
Return False to Go ahead or True to cancel the date change (week change).
afterWeek
Change: (newDate)
Fires when the user/function
has allowed to change date on the calendar (week)
Listeners will be called with the following arguments:
newDate
: the instance of the current month view object
example value: Mon Aug 18 2008 00:00:00 GMT
-
0700 (Pacific Daylight Time)
`
Page
26
of
28
E2CS event calendar alpha 0.0.4 reference manual
Notes about this
widget
We used ExtJs to create E2CS and will keep doing it so far, for the moments no planning on develop this
for Jquery or Prototype, may be on the future.
This control still is at alpha stage so the use on production applications it’s at your own risk.
This control also uses
a function from DOJO’s Date object. So we do not steal the credits and this function
had a little modifications (minimal so can work for ExtJs).
The control so far has been tested on IE6, IE7, Firefox 2, Firefox 3.0, and Opera 9x w
hich is our main
development platforms. Other platforms we do not assure functionality because we don’t have the
resources to test it. Or the equipment.
Tested on Ext 2.2 and have no trouble at all.
FAQ’s
On internet Explorer IE6, IE7 there are a lot of e
rrors so I can’t make it work?
A:
the problem so far in our tests has been the doc type declaration, remove it and it would work. Check on
http://extjs.com/forum/showthread.php?p=198740#post198740
and forward to see the posts.
The context menu appears but also the browser’s context menu and hides the
calendar’s context
menu?
A:
testing we found out that you don’t have to right click fast so
it have to be slow about 3 to 6 seconds on some browsers to
make it work fine and the browser’s context menu will not appear.
Is there Skins for the calendar, because I need it for my application?
A:
for the moment there’s none, but you can make it taking as a base the skin theme and adjusting the calendars css file and
the images also. If you want to submit one we could host for download the theme you create.
I have a deadline and I can’t make the ca
lendar work can you help me or give me support?
A:
Sure we could find a solution or arrangement and give support to those who need it according to the time of the deadline.
`
Page
27
of
28
E2CS event calendar alpha 0.0.4 reference manual
ROADMAP
Flash showcase of the calendar
Custom View
instead of
Event List
View (needed for final users request’s)
Implement calendar’s own event capture/edit forms
Implement Custom Forms for override the calendar’s own
Exporter for Google calendar
Exporter for Outlook
LOCALE files translation Credits
Thanks to these EXtJs
user
s for
the locale files
:
Chinese Translation
: Sniperdiablo
French Translation
:
phpuser
German Translation
: RugWarrior
Portugese / Brasil
:
Mateus Medeiros
History Log
09
-
09
-
2008 Version 0.0.6 released (Beta 0.0.1)
Chinese locale file updated
to the last version thanks to Sniperdiablo
Samples are online (see website e2cs.mm
-
mendez.com for more info)
Fixed crash
or conflicts on some Dom
ID
’s generated by the code
when two or more controls are on the same page
(tab sample)
Fixes minor render
issues when The calendar its contained on Ext.Components
such as Tabs, Layouts , Panels and so on
New package (e2cs
-
min.js) includes all the files to make the calendar work on previous releases
Notes: at this point on samples and test the calendar is quit
e stable for development or production environment. 0.0.6 it’s going
to be
the first
Beta release on the calendar
21
-
08
-
2008 Version 0.0.5 released
New upgrade
0.0.5 which includes:
Bug fixes of
day view, month view and week view which were displaying wr
ong dates on some events
New basic sample
file (php server side) and mysql database (sql file included)
`
Page
28
of
28
E2CS event calendar alpha 0.0.4 reference manual
06
-
08
-
2008
-
Version 0.0.4 released
General
o
Tested on Ext 2.2
o
Basic Sample Changed and Fixed. (more on development)
o
First ever E2CS calendar
Reference Manual
Calendar
o
tplTaskTip : Ext.XTemplate Object ( added on alpha 0.0.4) so you can give format to the qtips on the events
o
Locale files were updated with new string elements so check out if
it’s
in your lang
uage
for fix this (0.0.4 legend)
o
dat
eSelectorIconCls: 'selector', removed on alpha 0.0.4 cause: no use at all
o
Event
'taskDeleted',
removed not use at all with the other events
o
Event
'taskChanged' removed not yet an implementation
o
Day view
o
task_format: String (added on alpha 0.0.4
missing property)
o
Bug fixes about context menus and behaviors
o
if property headerbuttons =false anyway the buttons appear but
wi
th
out
functionality
Month view
o
if property headerbuttons =false anyway the buttons appear but wi
th
out functionality
o
goNextMont
h(), removed on alpha 0.0.4 cause: no use/ functionality at all
o
goPrevMonth(), removed on alpha 0.0.4 cause: no use/ functionality at all
Week View
o
When calendar resizes didn’t refresh this view
o
if property header buttons =false anyway the buttons appea
r but whiout functionality
o
Opera fix for week view in google style
works fine
o
P
lain
style on week view
does not work yet, still on development
o
Context menu added on Week view for events(tasks) and each day's body(grid background)
o
Week view events added beforeWeekChange , afterWeekChange, launchEventList
o
alldayTaksMore property implemented
Task.js
o
Many fixes for opera, IE and FF (busg, missing vars and dom elements retreival)
29
-
07
-
2008
–
Version 0.0.3 released
•
Updated some c
ontext Menu issues for (firefox, IE and Opera)
•
Also on day view if you right click on event(task) it appears one context menu but if its on days body it will appear it own.
•
Opera Event(task) display on day view
•
Includes Locale Files up to date (espa
nish, english, french, german, chinese, portugese/brasil)
15
-
07
-
2008
–
Version Alpha 0.0.2
•
Updated minor bugs and then some tips made by ext forum members also context menu on opera 9x its working (only on month view
) Here is
the patch
http://extjs.com/forum/showthread.ph...608#post195608
17
-
06
-
2008 UPDATE
•
Week view is on and kind of stable (there are some few bugs still..!)
•
Localization files now included (en,es) if someone can translate to another language please attach it to the po
sts so i can include them in the
whole package for next releases..!
•
M
any properties were deprecated and new on
• M
any events were deprecated and new on
06
-
01
-
2008 09:14 PM
First Release in ExtJs
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Comments 0
Log in to post a comment