VFのCalendarの表示位置不正の対応

inputFiledコンポネットを使って、データタイプは日付・時間の場合、項目はonFocusの場合、Calendarを表示する

でも、一括入力画面など実装する場合、一列の項目は凄く多いので、下記方法で、横Scrollで画面を実装する

その場合、予想外問題が発生しました、ポップアップのCalendar位置は崩れた、原因を調べると、SalesforceのCalendarの表示位置の設定はOffset利用して、設定されているので、Scroll存在するDiv中に、Calendarの位置計算が問題ありました、そのため、offsetじゃなく、postionで利用して、Calendar表示位置を再設定を行う

改修方法:いろいろ方法をためました、最後、直接SalesforceのMain.jsのCalendarのPostion取得Methodを上書して、対応しました

詳しく方法は下記様に作る

CssでCalendarのPostion設定修正

.datePicker {

   position:fixed;

}

// Salesforce Main.jsのMethod Modify DatePicker.prototype.position = function() { // 個別位置計算必要フラグを設定する var specialProcFlg = (this.myElement.id.indexOf(“:departTime”) >=0 || this.myElement.id.indexOf(“:timeofEntry”) >=0 || this.myElement.id.indexOf(“:entryTime”) >=0); // 個別処理 if (specialProcFlg) { a = $j(this.myElement).position().left; for (var b = 0, c = this.myElement; c != null && c != this.calendarDiv.offsetParent;) { //a += c.offsetLeft; b += c.offsetTop; c = c.offsetParent } } else { for (var a = 0, b = 0, c = this.myElement; c != null && c != this.calendarDiv.offsetParent;) { a += c.offsetLeft; b += c.offsetTop; c = c.offsetParent } } if (getObjY(this.myElement) + this.calendarDiv.offsetHeight > getScrollY() + getWindowHeight()) b -= this.calendarDiv.offsetHeight; else b += this.myElement.offsetHeight; c = “left”; if (LC.isRtlPage()) { c = “right”; a = this.calendarDiv.offsetParent.offsetWidth – a – this.myElement.offsetWidth } this.shim.setStyle(c, a + “px”); this.shim.setStyle(“top”, b + “px”) }

Hide the Current Date Link on an Inputfield

下記情報はURLから転載する

http://developer.force.com/cookbook/recipe/hide-the-current-date-link-on-an-inputfield

Problem

The standard apex:inputfield component for a date field generates a link next to the input field, taking a lot of space. The link allows someone to easily enter the current date. However, when you use multiple date fields within a table component, it can be confusing for the user to have these extra links (see Screenshots). This recipe solves this by creating a Visualforce component that uses CSS to remove the link.

Screenshots

Default Behavior: Current date link is rendered

Note the extra links next to each and every date field. Modified Behavior: Using a Visualforce component to remove the current date link

As you can see, this is a much more compact view.

Visualforce Component Code

Here’s the code for the Visualforce component. It wraps the component body in an HTML div tag, and adds styling to hide a part of that wrapped component.

01 <apex:component access="global">
02 <style>
03     div.hideCurrDate span.dateInput span.dateFormat{
04        display:none;
05     }
06 </style>
07 <div class="hideCurrDate">
08 <apex:componentBody />
09 </div>
10 </apex:component>

How to use the component

Here’s a simple Visualforce page to demonstrate component usage:

01 <apex:page standardController="Opportunity">
02 <apex:form>
03 <apex:pageBlock>
04 <apex:pageBlockSection>
05
06 <c:noDateLink>
07 <apex:inputField value="{!Opportunity.CloseDate}"/>
08 <c:noDateLink>
09
10
11 </apex:pageBlockSection>
12
13 </apex:pageBlock>
14 </apex:form>
15 </apex:page>

Discussion

This code is dependent on the standard salesforce look and feel – and in particular dependent on it not changing. By examining the standard CSS, we know that the current date link is in a span.dateInput span.dateFormat CSS element. So this may be a little fickle depending on UI changes – but it should be easy to change if the standard UI CSS does ever change.


VFでテンプレート作成お例:

<messaging:emailTemplate subject=”xxxxxxxお知らせ {!relatedTo.Name} ” recipientType=”User” relatedToType=”Object/CustomObject”>

<messaging:htmlEmailBody >
<html>
<body>

{!recipient.xxxx}様
<p></p>
<apex:outputField value=”{!relatedTo.xxxxx}” />様からのxxxxxに関してお知らせします。
<p></p>
xxxxxxxxxxxxxxxxx
<br></br>
xxxxx:<apex:outputField value=”{!relatedTo.Name}” />
<br></br>
xxxxx:<apex:outputField value=”{!relatedTo.Status__c}” />
<p></p>
xxxxxxxxxxxxxxxxxxxx
<br></br>
xxxxxx:<apex:outputField value=”{!relatedTo.xxxx}” />
<br></br>
xxxxxx:<apex:outputField value=”{!relatedTo.xxxx}” />
<br></br>
xxxxxx:<apex:outputField value=”{!relatedTo.xxxx}” />
<p></p>
詳細はこちらのリンクをクリックし、ご確認ください。
<br></br>
{!recipient.xxxxxx}{!relatedTo.Id}
<p></p>
以上、よろしくお願いします。

</body>
</html>
</messaging:htmlEmailBody>

</messaging:emailTemplate>

————————————————–

注:テンプレートに、recipient と relatedTo利用して、関連オブジェクトの項目情報を差し込み出来ます

Apexから、下記方法でメール送信が可能

public static void sendMailByTemplate(String templateId, String objectId, String creatorId, List<String> sendMails) {

Messaging.SingleEmailMessage mail = new Messaging.SingleEmailMessage();
if (!sendMails.isEmpty()) mail.setToAddresses(sendMails);
mail.setTemplateId(templateId);
mail.setTargetObjectId(creatorId);
mail.saveAsActivity=false;
mail.setWhatId(objectId);
List<Messaging.SendEmailResult> rsList = Messaging.sendEmail(new Messaging.SingleEmailMessage[] { mail });

}

FullCalendar中文帮助文档

1.与google日历连接,别忘记加入
<script type=’text/javascript’ src=’js/gcal.js’/>
events: $.fullCalendar.gcalFeed
(“http://www.google.com/calendar/feeds/xuqi86@gmail.com/private-660ae86cc26345cff3430480e8eea4bb/basic”,
{
className:’gcal-event’,
editable:true,
currentTimezone:’Asia/Shanghai’
}
)
2.表头信息
agenda带有具体的时间格子
month,basicWeek,basicDay,agendaWeek,agendaDay 是5种不同的视图
空格和,的区别
header:{
left: ‘month,basicWeek,basicDay,agendaWeek,agendaDay’,
center: ‘title’,
right: ‘prevYear,prev,today,next,nextYear’
}
3.是否使用 jquery的主题(我用的是start主题)
<link type=”text/css” href=”css/start/jquery-ui-1.7.2.custom.css” rel=”stylesheet” />
<script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js”></script>
<script type=’text/javascript’ src=’js/jquery.js’>
theme:true
4.
buttonText:{
prev: ‘昨天’,
next: ‘明天’,
prevYear: ‘去年’,
nextYear: ‘明年’,
today: ‘今天’,
month: ‘月’,
week: ‘周’,
day: ‘日’
}
5.每周的第一天是哪天
Sunday=0, Monday=1, Tuesday=2, etc.
firstDay:1
6.日期从右向左显示…不知道什么时候会这么用
isRTL:false
7.是否显示周末
weekends:true
8.在月视图里显示周的模式,因为可能每月周数不同,所以月视图高度不一定,注意引号
fixed 固定显示6周高,高度永远保持不变
liquid 不固定周数,周高度可变化
variable 不固定周数,但高度固定
weekMode:’fixed’
9.日历高度,包括表头
height: 850
内容高度,不包括表头
contentHeight: 600
10.单元格宽与高度的比值
注意:此属性不能与日历高度同时存在
aspectRatio: 1.35
11.切换视图的时候要执行的操作
view是一个对象,后面将说道具体的属性
viewDisplay:function(view){}
12.窗口大小变化时执行的操作
windowResize: function(view){}
13.把日历绑定到一个id的东西上
$(‘#id’).fullCalendar(‘render’);
14.销毁id日历
把日历回复到初始化前,删除了所有元素,时间,和初始化数据
$(‘#id’).fullCalendar(‘destroy’);
15.默认显示的视图,注意引号
defaultView:’month’
16.view对象的属性
name: 包括month,basicWeek,basicDay,agendaWeek,agendaDay
title: 标题内容(例如”September 2009″ or “Sep 7 – 13 2009”)
start:Date类型, 该view下的第一天.
end:Date类型, 该view下的最后一天. 由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天.
visStart:Date类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致.
visEnd: Date类型, 最后一个可访问的day
17.集中设定初始化值
可以设置的属性有 dragOpacity, titleFormat, columnFormat, and timeFormat
被应用的视图有
{
month: // month view
week: // basicWeek & agendaWeek views
day: // basicDay & agendaDay views
agenda: // agendaDay & agendaWeek views
agendaDay: // agendaDay view
agendaWeek: // agendaWeek view
basic: // basicWeek & basicDay views
basicWeek: // basicWeek view
basicDay: // basicDay view
”: // (an empty string) when no other properties match
}
18.取得视图对象
.fullCalendar(‘getView’)->View Object
var view = $(‘#calendar’).fullCalendar(‘getView’);
alert(“The view’s title is ” + view.title);
19.改变当前视图
.fullCalendar(‘changeView’,viewName)
20.20里以下属性都是在agenda视图里起作用的
在agenda开头的视图里,是否显示最上面all-day那一栏
allDaySlot:true
默认的文字:
allDayText:’今天的任务’
左边那一列时间的格式:
axisFormat:’h(:mm)tt’
()表示整点就不显示里面的内容
支持的格式化占位符
1. s: 秒
2. ss: 秒, 两位
3. m: 分钟
4. mm: 分钟, 两位
5. h: 小时, 12小时制
6. hh: 小时, 12小时制, 两位
7. H: 小时, 24小时制
8. HH: 小时, 24小时制, 两位
9. d: 日期数字
10. dd: 日期数字, 两位
11. ddd: 日期名称, 缩写
12. dddd: 日期名称, 全名
13. M: 月份数字
14. MM: 月份数字, 两位
15. MMM: 月份名称, 缩写
16. MMMM: 月份名称, 全名
17. yy: 两位的年份
18. yyyy: 4位的年份
19. t: 上下午加 a或者p
20. tt: 上下午加am或pm
21. T: 上下午加A 或者P
22. TT: 上下午加AM或PM
23. u: ISO8601格式
24. S: 给日期加上st, nd, rd, th等后缀, 表明是第几天
每行的时间间隔
slotMinutes:10
滚动条滚动到得起始时间
firstHour: 7
每天从几点起开始显示
minTime:7
minTime:’7:30′
如果加上了分钟需要设置时间间隔
每天显示到几点结束
maxTime:24
maxTime:’23:10′
事件默认的时间执行长度
defaultEventMinutes:120
此时,如果事件对象没有指定执行多长时间,则默认执行两个小时,后面将说到事件对象
21.当前日期
year: 必须是4位数字,如果不指定,则是当前年
month: 当前月,从0开始,如果当前年和月都未指定,则月显示为1月
date:日期的一个月,这个属性只和周视图和日视图有关,如果没指定,并且年月也没有指定,则显示一个月的第一天
以下8个关于操作日期的方法
.fullCalendar(‘prev’) 返回到上一个年月日,与视图的种类有关
.fullCalendar(‘next’)
.fullCalendar(‘prevYear’)
.fullCalendar(‘nextYear’)
.fullCalendar(‘today’)
.fullCalendar( ‘gotoDate’, year [, month, [ date ]] ) 注意月从0开始
.fullCalendar( ‘incrementDate’, years [, months, [ days ]] )
.fullCalendar( ‘getDate’ ) -> Date 取得一个日期对象
$(‘#my-button’).click(function() {
var d = $(‘#calendar’).fullCalendar(‘getDate’);
alert(“The current date of the calendar is ” + d);
});
22.指定默认的时间格式
timeFormat:h(:mm)tt
23.指定默认的列格式

columnFormat:{
month: ‘ddd’, // Mon
week: ‘ddd M/d’, // Mon 9/7
day: ‘dddd M/d’ // Monday 9/7
}
24.标题格式化
titleFormat:{
month: ‘MMMM yyyy’, // September 2009
week: “MMM d[ yyyy]{ ‘&#8212;'[ MMM] d yyyy}”, // Sep 7 – 13 2009
day: ‘dddd, MMM d, yyyy’ // Tuesday, Sep 8, 2009
}
25.月显示的名字
monthNames:[‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’,
‘August’, ‘September’, ‘October’, ‘November’, ‘December’]
monthNames:[‘一月’,’二月’, ‘三月’, ‘四月’, ‘五月’, ‘六月’, ‘七月’,
‘八月’, ‘九月’, ‘十月’, ‘十一月’, ‘十二月’]
月名字的简写
monthNamesShort:[‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’
‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]
26.星期显示的名字
dayNames:[‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’,
‘Thursday’, ‘Friday’, ‘Saturday’]
dayNames:[‘星期日’, ‘星期一’, ‘星期二’, ‘星期三’,
‘星期四’, ‘星期五’, ‘星期六’]
星期名字的缩写
dayNamesShort:[‘Sun’, ‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’]
27.4个关于鼠标的回调方法
当点击某一天时触发此操作
dayClick:function( date, allDay, jsEvent, view ) { }
dayClick: function(date, allDay, jsEvent, view) {
if (allDay) {
alert(‘Clicked on the entire day: ‘ + date);
}else{
alert(‘Clicked on the slot: ‘ + date);
}
alert(‘Coordinates: ‘ + jsEvent.pageX + ‘,’ + jsEvent.pageY);
alert(‘Current view: ‘ + view.name);
// change the day’s background color just for fun
$(this).css(‘background-color’, ‘red’);
}
当点击某一个事件时触发此操作
eventClick:function( event, jsEvent, view ) { }
eventClick: function(calEvent, jsEvent, view) {
alert(‘Event: ‘ + calEvent.title);
alert(‘Coordinates: ‘ + jsEvent.pageX + ‘,’ + jsEvent.pageY);
alert(‘View: ‘ + view.name);
// change the border color just for fun
$(this).css(‘border-color’, ‘red’);
}
当鼠标悬停在一个事件上触发此操作
eventMouseover:function( event, jsEvent, view ) { }
当鼠标从一个事件上移开触发此操作
eventMouseout:function( event, jsEvent, view ) { }
28.事件对象
fullcalendar用来存储一个日历事件信息的标准对象
一下属性中,只有title和start是必须的
id:String/Integer (optional)
title:String
allDay:true or false (optional) 指定是否是全天事件
start:Date 事件开始时间,格式如下
IETF format (ex: “Wed, 18 Oct 2009 13:00:00 EST”)
ISO8601 format (ex: “2009-11-05T13:15:30Z”)
end: Date (optional) 事件结束时间
如果事件是一个全天事件,则结束时间包括在内
如果事件不是全天事件,结束时间是0:00,则结束时间的第二天不包括在内
url:String (optional) 当用户点击时,将会访问的网址
className: String/Array (optional) 这个事件使用的css 类名
editable:true or false (optional) 事件是否可编辑
source: Array/String/Function (automatically populated) 事件源,自动指定
除了以上属性外,你可以自己指定属性和值
29.事件数组 events (as an array)
events: [
{
title : ‘event1’,
start : ‘2010-01-01’
},
{
title : ‘event2’,
start : ‘2010-01-05’,
end : ‘2010-01-07’
},
{
title : ‘event3’,
start : ‘2010-01-09 12:30:00’,
allDay : false // will make the time show
}
]
事件Json源 events (as a json feed)
events: “/myfeed.php” 该URL返回一个json或数组的日程事件组, GET参数视startParam和endParam选项而定
当用户改变视图时触发此事件,FullCalendar 将通过GET方法传递参数来确定需要哪些日程数据
/myfeed.php?start=1262332800&end=1265011200&_=1263178646
startParam:’start’ 开始参数的名字
endParam:’end’ 结束参数的名字
cacheParam:’_’ 缓存参数的名字
lazyFetching:true 只有当需要的时候才取得数据,先从缓存里读取数据
_参数是自动加上去的,防止读缓存内容
日程事件 events (as a function)
events:function( start, end, callback ) { }
events: function(start, end, callback) {
$.ajax({
url: ‘myxmlfeed.php’,
dataType: ‘xml’,
data: {
// our hypothetical feed requires UNIX timestamps
start: Math.round(start.getTime() / 1000),
end: Math.round(end.getTime() / 1000)
},
success: function(doc) {
var events = [];
$(doc).find(‘event’).each(function() {
event.push({
title: $(this).attr(‘title’),
start: $(this).attr(‘start’) // will be parsed
});
});
callback(events);
}
});
}
30.事件源
eventSources 存储数组对象,可以是Arrays/Functions/URLs
eventSources: [
$.fullCalendar.gcalFeed(“http://www.google.com/feed1”),
$.fullCalendar.gcalFeed(“http://www.google.com/feed2”)
]
31.日程默认为全天日程
allDayDefault:true
32.当读取ajax数据时
loading:function( isLoading, view )
当开始读取的时候是true,当读取完成是false
33.改变日程事件
updateEvent:
eventClick: function(event, element) {
event.title = “CLICKED!”;
$(‘#calendar’).fullCalendar(‘updateEvent’, event);
}
日程对象可以通过回调函数被获得,比如 eventClick 或者 clientEvents的方法
34.取得客户端内存中保存的日程对象
clientEvents
.fullCalendar( ‘clientEvents’ [, idOrFilter ] ) -> Array 返回一个日程对象的数组
如果idOrFilter不写,则输出全部保存在客户端的日程对象数组
如果为ID ,则返回所有为此ID的对象
还可以为一个过滤function 接受一个日程对象,如果返回true,则此值包含在客户端对象组中国
35.从日历中删除日程
removeEvents 参数同上
36.重新取得日程
.fullCalendar(‘refetchEvents’) 从所有源并且重新渲染到屏幕上
37.增加一个日程源
.fullCalendar(‘addEventSource’,source)
源可以是Array/URL/Function ,获取的数据可以立刻显示在日历上
38.删除一个事件源
.fullCalendar(‘removeEventSource’,source)
39.日程绑定
eventRender.function( event, element, view ) { }
event 是企图被渲染的日程对象
element 是一个新建的jQuery<div>被用来渲染的,他已经在恰当的时间被创建
eventRender 返回函数可以修改element,返回一个新的dom元素,用来替换被渲染的元素,或者返回false,禁止被渲染
40.日程渲染后事件
eventAfterRender:function( event, element, view ) { }
41.渲染事件
.fullCalendar(‘renderEvent’,event[,stick])
通常,一旦日历重新取得日程源,则原有日程将消失,当指定stick为true时,日程将永久的保存到日历上
42.重新渲染所有事件
rerenderEvents
.fullCalendar(‘rerenderEvents’)
43.是否可以拖拽和改变大小
editable:true
44.禁止拖拽和改变大小
disableDragging:false
disableResizing:false
45.如果拖拽不成功,多久回复原状
dragRevertDuration:500 单位是毫秒
46.拖拽不透明度
dragOpacity:{
agenda:.5 //对于agenda试图
”:1.0 //其他视图
}
47.需要的js包
<script type=’text/javascript’ src=’js/ui.core.js’/>
<script type=’text/javascript’ src=’js/ui.draggable.js’/>
<script type=’text/javascript’ src=’js/ui.resizable.js’/>
注意顺序,要把jquery.js放到这3个包前面
48.拖拽事件引发的操作
eventDragStart:function(event,jsEvent,ui,view) { }
eventDragStop:function( event, jsEvent, ui, view ) { }
49.当拖拽完成并且时间改变
eventDrop:function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { }
dayDelta 保存日程向前或者向后移动了多少天
minuteDelta 这个值只有在agenda视图有效,移动的时间
allDay 如果是月视图,或者是agenda视图的全天日程,此值为true,否则为false
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
alert(
event.title + ” was moved ” +
dayDelta + ” days and ” +
minuteDelta + ” minutes.”
);
if (allDay) {
alert(“Event is now all-day”);
}else{
alert(“Event has a time-of-day”);
}
if (!confirm(“Are you sure about this change?”)) {
revertFunc();
}
}
50.改变大小的事件触发的操作
eventResizeStart:function( event, jsEvent, ui, view ) { }
eventResizeStop:function( event, jsEvent, ui, view ) { }
eventResize:function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }

FullCalendar Local Option

FullCalendarは条件にて、LocalOptionを変更したい場合、下記方法で対応する

 var $j = jQuery.noConflict();
 $j(document).ready(function() {
 // Japanese Local Config
 var localOptions = {};
 if ("{!$Label.VF_PGHELP_9051}" == "JP" ) {
 localOptions = {
 titleFormat: {
 month: 'yyyy年 MMM',
 week: "yyyy年 MMM dd日 {'—' yyyy年 MMM dd日}" ,
 day: "yyyy年 MMM dd日 dddd"
 },
 monthNames: ["1月",'2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
 dayNamesShort: ['日','月','火','水','木','金','土'],
 buttonText: {
 today: '今日',
 month: '月',
 week: '週',
 day: '日'
 },
 allDayText:'全日'
 }
 }
 /* initialize the calendar
 -----------------------------------------------------------------*/
 //var cal = $j('#calendar').fullCalendar({
 $j('#calendar').fullCalendar($j.extend({
 header: {
 left: 'month,agendaWeek,agendaDay',
 center: 'title',
 right: 'prevYear,prev,today,next,nextYear'
 },
 // titleFormat: {
 // month: 'yyyy年 MMM',
 // week: "yyyy年 MMM dd日 {'— 'yyyy年 MMM dd日}" ,
 // day: "yyyy年 MMM dd日 dddd"
 // },
 // selectable: true,
 // selectHelper: true,
 // monthNames: ["1月",'2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 // monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 // dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
 // dayNamesShort: ['日','月','火','水','木','金','土'],
 // buttonText: {
 // today: '今日',
 // month: '月',
 // week: '週',
 // day: '日'
 // },
 // allDayText:'全日',
 weekMode:'liquid',
 slotMinutes:30,
 theme: true,
 // editable: true,
 // Setup Task End Time By Start Time
 defaultEventMinutes: 60,
 // minTime:"6:00am",
 // maxTime:"8:00pm",
 lazyFetching: true,
 timeFormat: 'HH:mm{ - HH:mm}',
 events: function(start, end, callback) {
 // Calendar Block
 $j("div[id$='datablock']").block({
 message: 'Loading...'
 });
 startTime = $j.fullCalendar.formatDate(start, 'yyyy-MM-dd');
 endTime = $j.fullCalendar.formatDate(end, 'yyyy-MM-dd');
 // 検索条件を取得する
 // 搬入口
 //var defaultObjId = "000000000000000";
 entryId = $j("input[id='pEntrance:id']").val();
 // エレベータ
 elevatorId = $j("input[id='pEvtry:id']").val();
 // エレベーター(単独使用)
 elevatorSingId = $j("input[id='pEvtrySing:id']").val();
 // 荷捌口
 handlePlaceId = $j("input[id='pHandlePlace:id']").val();
 // Center
 centerId = $j("select[id$=':search:center']").val();
 recTypeId = $j("select[id$=':search:recType']").val();
 // 事業申請ID
 operSobjId = $j("#operationSid").val();
 // 利用状況情報を取得する(EVENT SOURCE)
 CMN_FacilityInfoByCalendar_Ctrl.getEvents(startTime,endTime,
 entryId,elevatorId,elevatorSingId,handlePlaceId,centerId,recTypeId,operSobjId, showResult, {escape:true});
 },
 eventClick: function(event) {
 if (event.url) {
 window.open(event.url);
 return false;
 }
 },
 //
 dayClick: function(date, allDay, jsEvent, view) {
   if (allDay) {
     if (view.name == "agendaDay" || view.name == "basicDay") return;
     $j('#calendar').fullCalendar('changeView', "agendaDay" );
     $j('#calendar').fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate());
   }
 }
}, localOptions));

Javascript Call Salesforce Method

————– Sample1 ————
Condition: Service Method is Exist

{!REQUIRESCRIPT("/soap/ajax/18.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/18.0/apex.js")}

{!REQUIRESCRIPT('/resource/' &  LEFT(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(TEXT(NOW()),':',''),'-',''),' ',''),10) & '000/jquery_js')}

//sforce.connection.sessionId = "{!$Api.Session_ID}";
// Class,Method {ParameName1: Value1, ParamName2: Value2}
var checkRs = sforce.apex.execute("XXXXX_CLass1","XXXX_Method1",{pleadId:leadidVal});

————- GETRECORDIDS ————–

{!REQUIRESCRIPT(‘/soap/ajax/23.0/connection.js’)}
{!REQUIRESCRIPT(‘/soap/ajax/23.0/apex.js’)}

var clearnRecords= {!GETRECORDIDS($ObjectType.RoomsStatus__c)};

if (clearnRecords.length < 1) {
     alert(“一件以上選択してください。”);
} else {
     // 選択したデータを取得、未清掃データを削除する
     var checkRs = sforce.apex.execute(‘namespace.RoomStatusManager’, ‘deleteUnCleanRoom’, {ids:clearnRecords});
     if (checkRs != “”) {
           alert(checkRs.length);
     } else {
           location.reload(true);
     }
}

—– class ——

webservice static String deleteUnCleanRoom(String[] idsLst) {

 

————– Sample2 ————
Condition: @RemoteAction (Version > Ver23)

ClassName.ClassMethod(parameVal1,parameVal2,...., showResult, {escape:true});

function showResult(result, event) {
    if (event.type == 'exception') {
        alert(event.message);
    } else {
        // Clear all Event
        $j('#calendar').fullCalendar('removeEvents');
        if (result != null) {

            eventsArray = new Array();
            // 取得する結果を表示する
            for (var i = 0; i < result.length; i++) {
                  .....
            }
         }
      }
}
				entryId,elevatorId,elevatorSingId,handlePlaceId,centerId,recTypeId,operSobjId, showResult, {escape:true});

————– Sample3 ————
Direct Edit Object Value

{!REQUIRESCRIPT("/soap/ajax/18.0/connection.js")}