Вопрос по fullcalendar – Изменить цвет прошедших событий в Fullcalendar

6

я пытаюсь реализоватьэто решение к "серый " прошедшие события в Fullcalendar, но яМне не повезло. Я'Я не слишком хорошо разбираюсь в Javascript, поэтому, я полагаю,Я делаю некоторые глупые ошибки. Я

мы поместили предложенный код в fullcalendar.js, внутри вызова daySegHTML (segs) около строки 4587.

Я добавил первые две строки в конце функцииs начальный список переменных (почему нет, я понял) -так как то так:

...
var leftCol;
var rightCol;
var left;
var right;
var skinCss;

var hoy = new Date;// get today's date
hoy = parseInt((hoy.getTime()) / 1000); //get today date in unix

var html = '';
...

Затем чуть ниже я добавил две другие строки внутри цикла:

for (i=0; i

Ваш Ответ

7   ответов
0

Адаптировано из @MaxD Приведенный ниже код - это то, что я использовал для окрашивания прошлых событий в серый.

JS для полного календаря в Json'е

 events: '/json-feed.php',
 eventRender: function(event,element,view) {
         if (event.end < new Date().getTime())
          element.addClass("past-event");   
    },
 other options ....

event.end» у меня в Json полно времени2017-10-10 10:00:00 '

CSS

.past-event.fc-event, .past-event .fc-event-dot {
    background: #a7a7a7;
    border-color: #848484
}
6

Если вы используете FullCalendar2 с Календарем Google, вам нужно будет использовать приведенную ниже версию кода. Это использует Moment.js для выполнения некоторых преобразований, но так как FC2 требует этого, вы 'Я буду использовать это уже.

        eventRender: function(event, element, view) {                   
            var ntoday = new Date().getTime();
            var eventEnd = moment( event.end ).valueOf();
            var eventStart = moment( event.start ).valueOf();
            if (!event.end){
                if (eventStart < ntoday){
                    element.addClass("past-event");
                    element.children().addClass("past-event");
                }
            } else {
                if (eventEnd < ntoday){
                    element.addClass("past-event");
                    element.children().addClass("past-event");
                }
            }
        }
@ QuestionerNo27 Где я могу добавить этот код? Будет ли это в eventSources? Roberto Flores
Это единственный ответ, который действительно работает (с использованием FullCal v.2.0.3). Спасибо, Джаредат. QuestionerNo27
2

Там'Нет необходимости возиться с fullcalendar.js. Просто добавьте обратный вызов, например:

    eventRender: function(calev, elt, view) {
      if (calev.end.getTime() < sometime())
        elt.addClass("greyclass");
    },

вам просто нужно определить правильный CSS для .greyclass.

Да, определите время / дату сравнения по вашему желанию. Что касается нулевого calev.end, проследите его с помощью вашего отладчика; он должен быть свойством объекта Event:ссылка на сайт MaxD
Потрясающие! Я пытался работать с обратным вызовом, но не могЯ не совсем понимаю синтаксис. (Как я уже сказал, Javascript отбивает смущение!) - к сожалению, это (с соответствующейкогда-то()" подмена, конечно) выбиваетUncaught TypeError: Невозможно вызвать метод 'GetTime» нуля " по какой-то причине ... Насколько я могу сказать, этоне нравится calev.end.getTime (). Jeff
АйПохоже, я гонялся за красной сельдью. Первое (из нескольких) событий в рассматриваемом календаре было "весь день" событие, и поэтому свойство calev.end было явно "ноль," который остановил дальнейшее выполнение кода. Я'я извлекаю события из календаря Google ... есть ли что-то еще, что я должен использовать в качестве теста, чтобы отследить события за весь день, которые произошли раньше "сегодня"? Jeff
О вашем втором ответе: добавив только класс в elt, вы можете установить:.past .fc-event-title {color: gray;} (или для .fc-event-time и т. д.) для стилизации события. Что касается проверки времени, это зависит от вас, что "прошедшие события" имею в виду... MaxD
Ах, спасибоА не было»не поймать .fc-event-title—конечно. Я былайк прошедшие события значатсобытия, которые закончились до сегодняшнего дня " но так как большинство событий - это мероприятия на весь день, возможно, мне просто нужно быть довольным тем, как ясейчас проверяю. Jeff
0

Адаптированный из оригинального ответа @Jeff просто проверьте, существует ли дата окончания, если он использует ее, в противном случае используйте дату начала. Существует ключ allDay (true / false), но события, отличные от allDay, все еще могут быть созданы без конечной даты, поэтому он все равно выдаст нулевую ошибку. Ниже код работал для меня.

eventRender: function(calev, elt, view) {
            var ntoday = new Date().getTime();
            if (!calev.end){
                if (calev.start.getTime() < ntoday){
                    elt.addClass("past");
                    elt.children().addClass("past");
                }
            } else {
                if (calev.end.getTime() < ntoday){
                    elt.addClass("past");
                    elt.children().addClass("past");
                }
            }
        }
0

Хорошо, так вотчто яу меня сейчас, этоS работает (вид):

eventRender: function(calev, elt, view) {
      var ntoday = new Date();
      if (calev.start.getTime() < ntoday.getTime()){
          elt.addClass("past");
          elt.children().addClass("past");
      }
}

В моей таблице стилей я обнаружил, что мне нужно изменить внешний и внутренний элементы, чтобы изменить цвет; Таким образомelt.children().addclass дополнение.

Единственная проверка времени, которую я смог получить на работе, не имея времени окончания всех событий дня, заключалась в том, чтобы посмотреть время начала - но это, очевидно, вызовет проблемы с многодневными событиями.

Есть ли другое возможное решение?

Привет, пожалуйста, посмотрите мой ответ, так как это должно помочь с многодневными мероприятиями. dev
2

Согласно FullCalendar v1.6.4

Стиль прошедших событий в css:

.fc-past{background-color:red;}

Стиль будущих событий в css:

.fc-future{background-color:red;}
Обратите внимание, что это стили календарных дней, а не событий. Mark
1

Каждое событие имеет идентификатор, связанный с ним. Хорошей идеей является сохранение собственной мета-информации обо всех событиях на основе их идентификаторов. Если вы получаете события, всплывающие из базы данных, добавьте поле в вашу таблицу. Что мне больше всего помогло, так это полагаться на обратные вызовы только для получения идентификаторов событий, а затем устанавливать / сбрасывать атрибуты, извлекаемые из моего собственного хранилища данных. Просто чтобы дать вам некоторую перспективу, я вставлю ниже раздел моего фрагмента кода. Ключ должен быть нацелен наEventDAO класс для всех ваших потребностей.

public class EventDAO
{
    //change the connection string as per your database connection.
    //private static string connectionString = "Data Source=ASHIT\\SQLEXPRESS;Initial Catalog=amit;Integrated Security=True";

    //this method retrieves all events within range start-end
    public static List getEvents(DateTime start, DateTime end, long nParlorID)
    {
        List events = new List();

        // your data access class instance
        clsAppointments objAppts = new clsAppointments();

        DataTable dt = objAppts.SelectAll( start, end);

        for(int i=0; i

Шаги высокого уровня следующие:

  1. Добавьте недвижимость к вашемуcevent учебный класс. Назови этоclassName или что-то еще, что вы желаете.
  2. Заполните это вEventDAO класс, получая все события. Используйте базу данных или любое другое локальное хранилище, которое вы поддерживаете, чтобы получить мета-информацию.
  3. В вашемjsonresponse.ashx, получитьclassName и добавить его к возвращенному событию.

Пример фрагмента из:jsonresponse.ashx

return    "{" +
    "id: '" + cevent.id + "'," +
    "title: '" + HttpContext.Current.Server.HtmlEncode(cevent.title) + "'," +
    "start:  " + ConvertToTimestamp(cevent.start).ToString() + "," +
    "end: " + ConvertToTimestamp(cevent.end).ToString() + "," +
    "allDay:" + allDay + "," +
    "className: '" + cevent.className + "'," +
    "description: '" + 
    HttpContext.Current.Server.HtmlEncode(cevent.description) + "'" +  "},";

Похожие вопросы