Если у вас есть бюджет, я бы определенно выбрал коммерческий компонент, такой как Telerik's Scheduler Control .Это будет стоить $ 999 за коллекцию, я никогда раньше не использовал элементы управления Telerik, поэтому я не могу рекомендовать их сам, но, судя по всему, это может стоить того в долгосрочной перспективе, если вы сможете повторно использовать компоненты в других проектах.
Если это не вариант, то что-то столь же простое, как ваш пример, будет довольно легко раскрутить самостоятельно.Я в основном работаю в WinForms, поэтому вот как я собираюсь создать форму:
- Создайте пользовательский элемент управления для отображения любого дня.Вам понадобится метка в верхнем углу дня месяца и метка для отображения текста дня (время входа / выхода).Возможно добавьте границу.
- Создайте форму или элемент управления, который будет содержать календарь
- Добавьте панель инструментов, прикрепленную к вершине, с вашими элементами управления месяцем и годом.Используйте поле со списком или кнопку раскрывающегося списка.
- Добавьте тонкую панель, прикрепленную к вершине, и добавьте метки для дней.Определите ширину каждого столбца и расположите метки на основе этого.
- Добавьте
FlowLayoutPanel и установите Dock на Fill.Он будет содержать «дневные» элементы управления, которые будут течь слева направо, сверху вниз.
Теперь вам нужно работать с кодом, а не с дизайнером.Вероятно, это можно сделать в конструкторе, обработчике Page_Load или в другом месте, которое вызывается при задании (или инициализации) месяца / года:
- Добавьте достаточно пустых панелей в
FlowLayoutControlчтобы вспомнить начало месяца.Вы можете узнать, сколько добавить с помощью new DateTime(year, month, 1).DayOfWeek, чтобы найти день, на который выпадает первое число месяца.Пустые панели должны иметь тот же размер, что и элемент управления «день». - Добавить элемент управления
day к FlowLayoutControl для каждого дня месяца.Используйте DateTime.DayInMonth(year, month), чтобы найти количество дней в выбранном месяце, и установите для каждого элемента управления «день» дату (и, вероятно, входные / выходные данные) по мере ее добавления. - Теперь играйтес отступами и рамками на «дневных» элементах управления и панелях заполнения, пока все не будет выглядеть правильно.Вы можете добавить несколько тестовых «дневных» элементов управления и панелей в конструкторе, чтобы протестировать макеты и просто вызвать
flowLayoutControl.Items.Clear() в коде настройки.
Это должно привести к тому, что элемент управления может динамически отображать любой месяц.,Чтобы добавить функцию редактирования посещаемости, установите обработчик Click либо в элементе управления «день», либо в самом элементе управления календарем (когда вы добавляете элементы управления «день» в FlowLayoutControl, и откройте модальную форму).отредактировать или добавить время входа / выхода для выбранного дня.
Если вы хотите, чтобы дневные элементы управления динамически изменяли размер, зарегистрируйтесь для события Resize содержащего элемента управления и устанавливайте ширину и высоту каждого элемента управления для дня равными Math.Floor(control.Width / 7) (семь дней в ширину) и Math.Floor(control.Height / 5) (пять недель в высоту) или что-то подобное.