jquery - 使 Primefaces 计划事件在某些条件下可拖动和不可拖动

Question

我正在使用 primefaces p:schedule 组件来显示事件，如下所示。 p:schedule

These events can be draggable if we set property draggable="true" and with event 'eventMove'.

I have two type of events, which I can differntiate by using their 'title'

我希望 type1 事件可拖动，而 type 2 事件不可拖动。

我怎样才能实现它？因为我们提供了以这种方式成为可拖动事件的语法。

<p:schedule value="#{scheduleController.eventModel}" widgetVar="myschedule" draggable="true">  

        <p:ajax event="dateSelect" listener="#{scheduleController.onDateSelect}" update="eventDetails" oncomplete="eventDialog.show()" />  
        <p:ajax event="eventSelect" listener="#{scheduleController.onEventSelect}" update="eventDetails" oncomplete="eventDialog.show()" />  
        <p:ajax event="eventMove" listener="#{scheduleController.onEventMove}" update="messages" />  


    </p:schedule>

Answer 1

您必须深入研究 fullcalendar 插件才能实现它。检查这些问题:

FullCalendar: How to stop dragging custom events?

How do I disable drag and drop in fullcalendar

http://code.google.com/p/fullcalendar/issues/detail?id=1243

http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

也许如果您可以在 JSF 服务器的响应发出之前对其进行编辑，请尝试使用过滤器。

当可拖动为 ON 时，事件具有以下一般结构:

注意主 div 的类:

<div style="position: absolute; z-index: 8; top: 83px; left: 359px; width: 133.85px; height: 166px;" class="fc-event fc-event-skin fc-event-vert fc-event-draggable fc-corner-top fc-corner-bottom ui-draggable ui-resizable">

<div class="fc-event-inner fc-event-skin">
    <div class="fc-event-head fc-event-skin">
        <div class="fc-event-time">19/12 8:00 - 19/12 10:00</div>
    </div>
    <div class="fc-event-content">
        <div class="fc-event-title">Breakfast at Tiffanys</div>
    </div>
    <div class="fc-event-bg"></div>
</div>
<div class="ui-resizable-handle ui-resizable-s">=</div>
</div>
</div>

<!-- COMMENTED IN ORDER TO KEEP SAME CODE BLOCK -->
<!--When draggable is off, you can see the classes: -->

<div style="position: absolute; z-index: 8; top: 83px; left: 359px; width: 133.85px; height: 166px;" class="fc-event fc-event-skin fc-event-vert fc-corner-top fc-corner-bottom ui-resizable">
<div class="fc-event-inner fc-event-skin">
    <div class="fc-event-head fc-event-skin">
        <div class="fc-event-time">19/12 8:00 - 19/12 10:00</div>
    </div>
    <div class="fc-event-content">
        <div class="fc-event-title">Breakfast at Tiffanys</div>
    </div>
        <div class="fc-event-bg"></div>
    </div>
    <div class="ui-resizable-handle ui-resizable-s">=</div>
</div>
</div>

然后您需要取消注册您想要的预定事件的 DOM 事件，但是...

安排每次重新渲染，并重新注册事件和类。您几乎无法控制这些项目，因为 primefaces 将数据转发到 jQuery 计划插件。

因此，您需要在每次重新渲染时将事件标记为不可拖动。

ajax 代码上的 PF 响应是一个 JavaScript 对象，其中包含插件重新呈现时间表所需的数据，因此我认为服务器端的任何内容都不会帮助您。

这是事件拖动的服务器响应:

<partial-response>
<changes>
<update id="formNotificacao:j_idt72">{"events" : [{"id": "0df04a40-3477-4564-ae2c-340509acd09e","title": "Champions League Match","start": 1355781614894,"end": 1355792414894,"allDay":false,"editable":true},{"id": "3d1e23ec-3a85-488b-aea4-00fa5f2205da","title": "Birthday Party","start": 1355748300000,"end": 1355766300000,"allDay":false,"editable":true},{"id": "35dec60d-0e7a-431d-aef4-b077616908ab","title": "Breakfast at Tiffanys","start": 1355919300000,"end": 1355926500000,"allDay":false,"editable":true},{"id": "4b6c8d2c-bcf1-444c-a92f-d5a0b60499a1","title": "Plant the new garden stuff","start": 1356022814910,"end": 1356195614910,"allDay":false,"editable":true}]}</update>
<update id="javax.faces.ViewState">-8755441948733966113:8810728330896833649</update>
</changes>
</partial-response>

我认为你必须使用一些 JavaScript 来从你想要的元素中取消注册事件。但由于它们是从服务器加载的，仅包含数据，因此您必须通过名称、日期或其他内容来识别它们。

有关如何取消注册事件的信息，请参阅此问题:jquery override event

所以路径是:

• 在 JSF 页面上放置一些 javascript，用于取消注册所选计划项目的事件。
• 传入此 JavaScript 信息，了解它将如何识别将不可拖动的预定项目。
• 找出正在监听拖动事件的元素。
• 覆盖拖动事件，使其不起作用，同时不会干扰其他计划项目。

<小时/>

作为额外的好处，这是我测试过的源代码:

您必须将 <p:schedule> 的可拖动属性绑定(bind)到托管 bean bool 属性，然后使用控件(在下面的示例中为 selectbooleancheckbox:

<p:schedule value="#{scheduleController.eventModel}" draggable="#{scheduleController.draggable}" (...) />

注意与服务器通信的ajax标签:

<p:selectBooleanCheckbox value="#{scheduleController.draggable}">
<p:ajax update=":formNotificacao:toggleDraggableSchedule"/>
</p:selectBooleanCheckbox>

整个 JSF 代码:

                <h:form id="formNotificacao">

                    <p:growl id="messages" showDetail="true" />
<h:panelGroup id="toggleDraggableSchedule">
                    <p:schedule value="#{scheduleController.eventModel}" draggable="#{scheduleController.draggable}"
                        widgetVar="myschedule" view="agendaWeek" allDaySlot="false"
                        slotMinutes="15" firstHour="7" showWeekends="FALSE"
                        leftHeaderTemplate="prev,next" rightHeaderTemplate=""
                        minTime="7am" maxTime="21pm"
                        timeFormat="dd/MM H:mm{ - dd/MM H:mm}" axisFormat="HH"
                        timeZone="#{rotulo.timeZone}">

                        <p:ajax event="dateSelect"
                            listener="#{scheduleController.onDateSelect}"
                            update="formNotificacao" oncomplete="eventDialog.show()" />
                        <p:ajax event="eventSelect"
                            listener="#{scheduleController.onEventSelect}"
                            update="formNotificacao" oncomplete="eventDialog.show()" />
                        <p:ajax event="eventMove"
                            listener="#{scheduleController.onEventMove}" update="formNotificacao" />
                        <p:ajax event="eventResize"
                            listener="#{scheduleController.onEventResize}" update="formNotificacao" />

                    </p:schedule>
</h:panelGroup>
                    <p:dialog widgetVar="eventDialog" header="Event Details"
                        showEffect="clip" hideEffect="clip">
                        <h:panelGrid id="eventDetails" columns="2">
                            <h:outputLabel for="title" value="Title:" />
                            <p:inputText id="title"
                                value="#{scheduleController.event.title}" required="true" />

                            <h:outputLabel for="from" value="From:" />
                            <p:calendar value="#{scheduleController.event.startDate}" pattern="MM/dd/yyyy HH:mm"  stepMinute="15" />

                            <h:outputLabel for="to" value="To:" />
                            <p:calendar value="#{scheduleController.event.endDate}" pattern="MM/dd/yyyy HH:mm"  stepMinute="15" />

                            <h:outputLabel for="allDay" value="All Day:" />
                            <h:selectBooleanCheckbox id="allDay"
                                value="#{scheduleController.event.allDay}" />

                            <p:commandButton type="reset" value="Reset" />
                            <p:commandButton value="Save"
                                actionListener="#{scheduleController.addEvent}"
                                oncomplete="myschedule.update();eventDialog.hide();" />
                        </h:panelGrid>
                    </p:dialog>

<p:selectBooleanCheckbox value="#{scheduleController.draggable}">
<p:ajax update=":formNotificacao:toggleDraggableSchedule"/>
</p:selectBooleanCheckbox>

                </h:form>

托管 bean:

import java.text.DateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.List;
import java.util.TimeZone;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

import org.primefaces.event.DateSelectEvent;
import org.primefaces.event.ScheduleEntryMoveEvent;
import org.primefaces.event.ScheduleEntryResizeEvent;
import org.primefaces.event.ScheduleEntrySelectEvent;
import org.primefaces.model.DefaultScheduleEvent;
import org.primefaces.model.DefaultScheduleModel;
import org.primefaces.model.ScheduleEvent;
import org.primefaces.model.ScheduleModel;

@ManagedBean
@ViewScoped
public class ScheduleController {

private ScheduleModel eventModel;

private ScheduleEvent event = new DefaultScheduleEvent();

private List<ScheduleEvent> eventos;

private String theme;

private boolean draggable;

public ScheduleController() {

    eventModel = new DefaultScheduleModel();
    eventModel.addEvent(new DefaultScheduleEvent("Champions League Match",
            previousDay8Pm(), previousDay11Pm()));
    eventModel.addEvent(new DefaultScheduleEvent("Birthday Party",
            today1Pm(), today6Pm()));
    eventModel.addEvent(new DefaultScheduleEvent("Breakfast at Tiffanys",
            nextDay9Am(), nextDay11Am()));
    eventModel.addEvent(new DefaultScheduleEvent(
            "Plant the new garden stuff", theDayAfter3Pm(),
            fourDaysLater3pm()));
    setEventos(eventModel.getEvents());

}

private Date fourDaysLater3pm() {
    return getDate(4, 15);
}

private Date theDayAfter3Pm() {
    return getDate(2, 15);
}

private Date nextDay11Am() {
    return getDate(1, 11);
}

private Date nextDay9Am() {
    return getDate(+1, 9);
}

private Date today6Pm() {
    return getDate(0, 18);
}

private Date today1Pm() {
    return getDate(0, 13);
}

private Date previousDay11Pm() {
    return getDate(-1, 23);
}

private Date previousDay8Pm() {
    return getDate(-1, 20);
}

private Date getDate(int deltaDay, int hour) {
    Calendar cal = Calendar.getInstance();

    cal.setTime(new Date());
    cal.set(Calendar.HOUR_OF_DAY, hour);
    cal.set(Calendar.DAY_OF_MONTH, cal.get(Calendar.DAY_OF_MONTH)
            + deltaDay);
    return cal.getTime();
}

public void addEvent(ActionEvent actionEvent) {
    if (event.getId() == null)
        eventModel.addEvent(event);
    else
        eventModel.updateEvent(event);

    event = new DefaultScheduleEvent();
}

public void onEventSelect(ScheduleEntrySelectEvent selectEvent) {
    event = selectEvent.getScheduleEvent();
}

public void onDateSelect(DateSelectEvent selectEvent) {
    event = new DefaultScheduleEvent(Math.random() + "",
            selectEvent.getDate(), selectEvent.getDate());
}

public void onEventMove(ScheduleEntryMoveEvent event) {
    snapToFifteen((DefaultScheduleEvent) event.getScheduleEvent());
    FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
            "Event moved", "Day delta:" + event.getDayDelta()
                    + ", Minute delta:" + event.getMinuteDelta());
    addMessage(message);
}

public void onEventResize(ScheduleEntryResizeEvent event) {
    snapToFifteen((DefaultScheduleEvent) event.getScheduleEvent());
    FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
            "Event resized", "Day delta:" + event.getDayDelta()
                    + ", Minute delta:" + event.getMinuteDelta());
    addMessage(message);
}

private void snapToFifteen(DefaultScheduleEvent ev) {
    DateFormat sdf = DateFormat.getDateTimeInstance(DateFormat.FULL,
            DateFormat.FULL);
    sdf.setTimeZone(TimeZone.getTimeZone("GMT-3"));
    System.out.println("CALLING SNAP ON event: Start = "
            + sdf.format(ev.getStartDate()) + " End = "
            + sdf.format(ev.getEndDate()));
    Date inicio = fifteenize(ev.getStartDate());
    Date fim = fifteenize(ev.getEndDate());
    ev.setStartDate(inicio);
    ev.setEndDate(fim);
    System.out.println("Snapped: Start = " + sdf.format(ev.getStartDate())
            + " End = " + sdf.format(ev.getEndDate()));
}

private Date fifteenize(Date data) {
    Calendar cal = Calendar.getInstance();
    cal.setTime(data);
    int minutos = cal.get(Calendar.MINUTE);
    int modQuinze = (minutos + 7) / 15;

    cal.set(Calendar.MINUTE, modQuinze * 15);
    cal.set(Calendar.HOUR, cal.get(Calendar.HOUR));
    cal.set(Calendar.SECOND, 0);
    cal.set(Calendar.MILLISECOND, 0);
    return cal.getTime();
}

private void addMessage(FacesMessage message) {
    FacesContext.getCurrentInstance().addMessage(null, message);
}

public ScheduleModel getEventModel() {
    return eventModel;
}

public void setEventModel(ScheduleModel eventModel) {
    this.eventModel = eventModel;
}

public ScheduleEvent getEvent() {
    return event;
}

public void setEvent(ScheduleEvent event) {
    this.event = event;
}

public String getTheme() {
    return theme;
}

public void setTheme(String theme) {
    this.theme = theme;
}

public void setEventos(List<ScheduleEvent> eventos) {
    this.eventos = eventos;
}

public List<ScheduleEvent> getEventos() {
    return eventos;
}

public void setDraggable(boolean draggable) {
    this.draggable = draggable;
}

public boolean isDraggable() {
    return draggable;
}

}

如果您仔细观察托管 bean，它与 primefaces 展示示例相比还有一些其他变化，例如，所有事件都以 15 分钟为间隔，以及其他内容。