Class Ext. ECalendar.monthview - MM- Mendez

`

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