将模式添加到FullCalendar事件条目

Question

我想我在这里想念一些东西。我正在使用maadhatter的FullCalendar插件。当前的问题是日历上的事件绝对不能被单击，并且正计划添加一个弹出模式以获取事件的更多详细信息。这是我目前的进度。

日历班

class Calendar
{

protected $view;

protected $eventCollection;

protected $defaultOptions = [
    'header' => [
        'left' => 'prev,next',
        'center' => 'title',
        'right' => '',
    ],
    'eventLimit' => true,
];
protected $userOptions = [];
protected $callbacks = [];

public function __construct(Factory $view, EventCollection $eventCollection)
{
    $this->view            = $view;
    $this->eventCollection = $eventCollection;
}

public static function event($title, $isAllDay, $start, $end, $id = null, $options = [])
{
    return new SimpleEvent($title, $isAllDay, $start, $end, $id, $options);
}

public function calendar()
{
    return '<div id="calendar-' . $this->getId() . '"></div>';
}

public function script()
{
    $options = $this->getOptionsJson();
    return $this->view->make('fullcalendar::script', [
        'id' => $this->getId(),
        'options' => $options,
    ]);
}

public function setId($id)
{
    $this->id = $id;

    return $this;
}

public function getId()
{
    if ( ! empty($this->id)) {
        return $this->id;
    }

    $this->id = str_random(8);

    return $this->id;
}

public function addEvent(Event $event, array $customAttributes = [])
{
    $this->eventCollection->push($event, $customAttributes);
    return $this;
}

public function addEvents($events, array $customAttributes = [])
{
    foreach ($events as $event) {
        $this->eventCollection->push($event, $customAttributes);
    }
    return $this;
}

public function setOptions(array $options)
{
    $this->userOptions = $options;

    return $this;
}

public function getOptions()
{
    return array_merge($this->defaultOptions, $this->userOptions);
}

public function setCallbacks(array $callbacks)
{
    $this->callbacks = $callbacks;

    return $this;
}

public function getCallbacks()
{
    return $this->callbacks;
}

public function getOptionsJson()
{
    $options      = $this->getOptions();
    $placeholders = $this->getCallbackPlaceholders();
    $parameters   = array_merge($options, $placeholders);

    if (!isset($parameters['events'])) {
        $parameters['events'] = $this->eventCollection->toArray();
    }

    $json = json_encode($parameters);

    if ($placeholders) {
        return $this->replaceCallbackPlaceholders($json, $placeholders);
    }

    return $json;

}


protected function getCallbackPlaceholders()
{
    $callbacks    = $this->getCallbacks();
    $placeholders = [];

    foreach ($callbacks as $name => $callback) {
        $placeholders[$name] = '[' . md5($callback) . ']';
    }

    return $placeholders;
}


protected function replaceCallbackPlaceholders($json, $placeholders)
{
    $search  = [];
    $replace = [];

    foreach ($placeholders as $name => $placeholder) {
        $search[]  = '"' . $placeholder . '"';
        $replace[] = $this->getCallbacks()[$name];
    }

    return str_replace($search, $replace, $json);
}

}

然后使用EventModel模型

class EventModel extends Eloquent implements \MaddHatter\LaravelFullcalendar\Event
{

    protected $dates = ['start', 'end'];
    protected $table = 'events';
    protected $fillable = ['title', 'color', 'start_date', 'end_date'];

    public function getId() {
        return $this->id;
    }

    public function getTitle()
    {
        return $this->title;
    }

    public function isAllDay()
    {
        return (bool)$this->all_day;
    }

    public function getStart()
    {
        return $this->start;
    }

    public function getEnd()
    {
        return $this->end;
    }
}

用于添加日历事件的控制器

public function index()
{
    $events = [];
    $day_count = cal_days_in_month(CAL_GREGORIAN,Carbon::today()->format('n'),Carbon::today()->format('Y'));
    $trainings = Training::where('active', 1)
                        ->get();
    $dates = array();
    $eloquentEvent = EventModel::first(); //EventModel implements MaddHatter\LaravelFullcalendar\Event

    foreach ($trainings as $training)
    {
        $date = array_push($dates, explode("-", $training->start_date));

        $events[] = \Calendar::event(
            $training->title,
            false,
            new \DateTime($training->start_date),
            new \DateTime($training->start_date)
        );
    }
    $calendar = \Calendar::addEvents($events) //add an array with addEvents
                        ->setOptions([ //set fullcalendar options
                            'firstDay' => 0
                        ]);

    return view('admin.index', compact('trainings', 'day_count', 'dates', 'calendar'));
}

最后，对于视图（在portlet下）

<div class="m-portlet__body">
     <div id="calendar2">
         {!! $calendar->calendar() !!}
         {!! $calendar->script() !!}
     </div>
</div>

如果有关于使用其他日历模板的任何建议，那就太好了。另外，作为参考，事件将来自数据库，并且对JS代码的过多输入可能会使Web应用程序占用更多内存