Угловой полный календарь версии 5 - скрыть прошлые даты или отключить клик по прошлым датам

Я разрабатываю планировщик еды, который позволяет пользователям выбирать дату плана. Мне не нужно планировать события, мне просто нужно, чтобы дата была нажата (мне нужен только dayClick).

Версия:

"@fullcalendar/angular": "^5.5.0",>     
"@fullcalendar/daygrid": "^5.5.0",>     
"@fullcalendar/interaction": "^5.5.0",

Код:

export class DateSelector {

    currentDate : Date = new Date();
    
    calendarOptions: CalendarOptions = {
      initialView: 'dayGridMonth',
      dateClick: this.handleDateClick.bind(this),
      validRange : {
        start : this.currentDate, //start is today
        end : getEndDate() //end is 6 months from today
      }
    };
  
    handleDateClick(arg) {
      console.log('date click! ' + arg.date); //Logs date correctly
    }
    
    getEndDate() : Date {
        this.currentDate.setMonth(this.currentDate.getMonth() + 6);
        return this.currentDate;
    }
}

<div class="row text-center">
  <full-calendar
  [options]="calendarOptions"></full-calendar>
</div>

Что я сейчас вижу: Календарь корректно затеняет/отключает прошлые даты без отображения чисел. Беда в том, что если сказать, что начало 24-го числа, календарь выглядит некрасиво.

Мне нужен способ, при котором либо (1) календарь начинается сегодня, т.е. прошлые дни скрыты. (2) Отключенные прошлые даты выглядят лучше — номера отображаются серым цветом, но на них нельзя щелкнуть.


javascript angular hide fullcalendar fullcalendar-5
person user14825272    schedule 26.01.2021    source источник
comment
попробуйте использовать selectAllow fullcalendar.io/docs/selectAllow   -  person zainhassan    schedule 26.01.2021
comment
Параметр validRange может помочь вам   -  person ADyson    schedule 26.01.2021
comment
HiADyson, я использую validRange, и он делает то, что мне нужно. Беда в том, что из-за этого мой календарь выглядит некрасиво. Представьте, что сегодня 31 января, а 1-30 января выделены серым цветом — пользовательский интерфейс будет выглядеть довольно плохо.   -  person user14825272    schedule 26.01.2021
comment
Именно это и делает fullCalendar. Не знаете, что вы хотите, чтобы мы с этим сделали? Я думаю, вы можете попробовать настроить CSS или что-то в этом роде, если вы действительно хотите изменить внешний вид. Извините за негатив, но это больше похоже на стон, чем на любой вопрос о решении проблемы. Вы пытались сделать что-нибудь, чтобы изменить его в соответствии с вашими предпочтениями?   -  person ADyson    schedule 26.01.2021
comment
Привет, Эдисон, Извини, что не стонал. Я попробовал selectAllow, я попытался добавить классы CSS, и это не изменило внешний вид. Я думал, что в календаре будет возможность скрывать прошлые даты. Думаю, теперь мне придется переключиться на другой календарь. У Вас есть какие-то предложения.   -  person user14825272    schedule 27.01.2021

Ответы (2)


arrow_upward
0
arrow_downward

Поэтому я не уверен, что буду очень полезен для второй половины вашего вопроса о выделении серым цветом прошлых дат как части того же цикла, но у меня есть код, который работает с примером «Locales.html» для создайте переменную с сегодняшней датой. Также стоит упомянуть, что я не использую набор файлов angular (думаю, у меня есть файлы реакции). Вы можете эффективно подключить это

var theDate = new Date();
var dd = String(theDate.getDate()).padStart(2, '0');
var mm = String(theDate.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = theDate.getFullYear();

theDate = yyyy + '-' + mm + '-' + dd;

Просто передайте имя своей переменной в этом document.addEventListener('DOMContentLoaded', function() в качестве параметра initialDate.

Что касается затемнения чисел, вы можете использовать созданную выше переменную даты, dd, в качестве проверки в цикле for. Что-то типа

function myFunction() {
for (i=0; i<dd; i++) {
document.getElementsByClassName("fc-daygrid-day-number").style.color = "#aaa"; }
}

Я еще не очень хорошо разбираюсь в javascript, но теоретически это должно изменить цвет всех дат месяца до сегодняшнего дня на серый. Скорее всего, вам придется искать какой-то способ предотвратить серые дни в течение следующих месяцев, но я надеюсь, что это отправная точка!

person JustLearning    schedule 28.01.2021

arrow_upward
0
arrow_downward

вы можете добавить firstDay:{getDay(new Date())}, чтобы получить номер дня и начать календарь с этой даты

person omar zizo    schedule 27.06.2021