Question

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

如果我们设置属性draggable =“true”并且这些事件可以拖动   事件'eventMove'。

我有两种类型的事件，我可以通过使用它们来区分   '标题'

我希望type1事件可以拖动，类型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服务器的响应，请尝试使用过滤器。

当draggable为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 schedule插件。

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

对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信息，了解它将如何识别将被取消不可拖动的预定动作。
找出正在为drag事件监听的元素。
覆盖了拖动事件，因此它不起作用，而不会弄乱其他预定的事件。

作为一个额外的奖励，这里是我测试的来源：

您必须将<p:schedule>的draggable属性绑定到托管bean布尔属性，然后使用控件（在下面的示例中，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分钟为间隔，以及其他内容。

Answer 2

我是怎么做到的：

public class MyScheduleEvent extends DefaultScheduleEvent {
    public MyScheduleEvent(MyEntity myEntity) {
        super(....)
        this.setEditable(myEntity.isEditable());
    }
}

我使用懒惰模型，但这适用于默认模型。这项工作与预期相符。使用PrimeFaces 4.11

使Primefaces在某些条件下安排事件可拖动和不可分割

2 个答案: