Blazor 응용 프로그램과 Google 캘린더를 통합 및 동기화하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-09-28 16:20 조회 2,646회 댓글 0건

본문

첨부파일

BlazorCalendar_GoogleCalendar.zip (232.7K)

관련링크

달력은 날짜를 체계적으로 관리하는 데 유용한 시스템으로, 오랫동안 사용되어 왔습니다. 인터넷 시대에 달력은 개인 및 조직이 회의, 휴가, 중요한 이벤트를 기억 및 예약하기 위한 중요한 생산성 향상 도구입니다.

GrapeCity 팀에서는 2021 v1 릴리스에서 Blazor 버전에 C1Calendar 컨트롤을 도입했습니다. C1Calendar는 고도로 사용자 정의 가능한 컨트롤로, 사용자가 대화형 웹 응용 프로그램을 만들도록 허용하고, 일정 예약 외에도 다양한 이점을 제공하며, 사용자가 요구 사항에 따라 사용자 정의하도록 허용합니다.

이 포스팅에서는 C1Calendar를 사용하여 여러 달력이 포함된 널리 사용되는 Google 캘린더에서 약속을 동기화하는 방법을 살펴봅니다. 또한 다음과 같이 C1Calendar를 사용하여 Google 캘린더에 새 약속을 추가하는 방법도 살펴보겠습니다.

Google Calendar API 작업
Blazor 앱에 C1Calendar 통합
Google 캘린더에서 C1Calendar에 대한 약속 표시
Google 캘린더에 약속 추가

이 포스팅에서는 샘플 응용 프로그램을 만들어 보면서 Google 캘린더의 기본 사항과, 사용자가 Google 캘린더 라이브러리 및 C1Calendar를 활용하는 방법에 대해 알아보겠습니다.

Google Calendar API 작업

Google 캘린더는 사용자의 Google 계정과 연결됩니다. 이 달력에는 기본 달력이 하나 있고, 기본 달력은 사용자 간에 공유할 수 있는 독립적인 여러 달력을 포함할 수 있습니다.

이 포스팅에서는 달력 중 하나(기본 달력)를 C1Calendar 컨트롤과 동기화 할 것입니다.

Google 캘린더 및 이벤트 이해

달력은 위치, 요약, 시간대 등과 같은 추가 정보가 포함된 유사한 이벤트 컬렉션으로 나타낼 수 있습니다. 각 달력은 고유한 달력 ID와 연결되어 있는 반면에 이벤트는 특정 날짜와 연결되어 있고 각 이벤트에는 고유한 이벤트 ID가 있습니다.

이러한 이벤트는 특정 기간에 대해 또는 하루 동안에 대해 설정할 수 있습니다. 이 경우, 약속의 각 인스턴스는 단일 이벤트를 나타냅니다. Google 캘린더를 사용하면 사용자는 Google Calendar API를 사용할 때만 달력 한 개에서 이벤트 목록을 구문 분석할 수 있습니다. 지정된 달력의 이벤트는 달력 ID를 매개 변수로 전달함으로써 Events.list() 함수를 사용하여 가져올 수 있습니다.

지원되는 함수에 대한 자세한 내용은 여기서 확인하십시오.

데모 응용 프로그램의 경우 아래 단계를 따릅니다.

Credentials.json 파일 만들기

Google API는 OAuth 2.0 인증 및 권한을 사용하고 API에 대해 지정된 범위를 기반으로 자격 증명을 생성합니다. 이 범위를 사용하여 리소스 및 권한을 부여할 수 있습니다. 코드에서 Google Calendar API에 액세스하려면 액세스 토큰이 필요한데, 이 토큰은 자격 증명에서 가져올 수 있습니다.

사용자 동의는 Google 계정에 로그인하여 설정할 수 있고, 자격 증명 파일을 생성할 수 있습니다. 액세스 토큰은 범위를 사용하여 권한이 부여된 작업만 수행하도록 하기 때문에 범위를 설정할 때 주의해야 합니다.

credentials.json 파일을 생성하는 자세한 방법은 여기서 확인하십시오.

Google Calendar API 사용

프로젝트에서 Google Calendar API를 사용하려면 NuGet 패키지 관리자에서 Google.Apis.Calendar.v3 NuGet 패키지를 설치해야 합니다.

API를 사용하여 Google 캘린더에서 약속에 액세스

시작하려면 Google 캘린더 NuGet 패키지와 credentials.json 파일이 필요합니다. credentials.json 파일을 프로젝트에 포함해야 합니다. 이제 생성된 자격 증명을 사용하여 Google 캘린더에서 데이터에 액세스하도록 서비스를 작성합니다.

public class GoogleService
  {
      string[] Scopes = { CalendarService.Scope.Calendar };
      string ApplicationName = "Blazor Calendar Scheduler";
      CalendarService Service;
      public GoogleService()
      {
          UserCredential credential;
          using (FileStream stream = new FileStream("credentials.json", FileMode.Open, FileAccess.Read))
          {
              credential = GoogleWebAuthorizationBroker.AuthorizeAsync(GoogleClientSecrets.Load(stream).Secrets, Scopes, "admin", CancellationToken.None, new FileDataStore("token.json", true)).Result;
          }
          Service = new CalendarService(new BaseClientService.Initializer() { HttpClientInitializer = credential, ApplicationName = ApplicationName });
      }
….
}

이제, GoogleService 클래스가 API를 사용하여 Google 캘린더에서 데이터에 액세스할 준비가 되었습니다. 이벤트 정보를 C# 목록으로 변환하려면 이벤트 목록을 가져온 후 이벤트 데이터를 목록에 매핑하기 위한 어댑터 클래스가 필요합니다.

약속을 표시 및 추가할 것이기 때문에 달력에서 이벤트를 가져와 추가하기 위한 메서드를 작성합니다.

public class GoogleService
  {
      ...
      /// <summary>
      /// Method to fetch Event List
      /// </summary>
      /// <param name="date"></param>
      /// <param name="calenderId"></param>
      /// <returns></returns>
      public List<Appointment> GetEvents(DateTime date, string calenderId = "primary")
      {
          try
          {
              EventsResource.ListRequest request = Service.Events.List(calenderId);
              request.TimeMin = date;
              request.MaxResults = 2500;
              Events events = request.Execute();
              List<Appointment> eventDatas = new List<Appointment>();
              if (events.Items != null && events.Items.Count > 0)
              {
                  foreach (Event eventItem in events.Items)
                  {
                      if (eventItem.Start == null && eventItem.Status == "cancelled")
                      {
                          continue;
                      }
                      DateTime start;
                      DateTime end;
                      if (string.IsNullOrEmpty(eventItem.Start.Date))
                      {
                          start = (DateTime)eventItem.Start.DateTime;
                          end = (DateTime)eventItem.End.DateTime;
                      }
                      else
                      {
                          start = Convert.ToDateTime(eventItem.Start.Date);
                          end = Convert.ToDateTime(eventItem.End.Date);
                      }
                      Appointment eventData = new Appointment()
                      {
                          Id = eventItem.Id,
                          Subject = eventItem.Summary,
                          StartTime = start,
                          EndTime = end,
                          Location = eventItem.Location,
                          Description = eventItem.Description,
                          IsAllDay = !string.IsNullOrEmpty(eventItem.Start.Date)
                      };
                      eventDatas.Add(eventData);
                  }
              }
              return eventDatas;
          }
          catch (Exception ex)
          {
              Console.WriteLine(ex.Message);
              return new List<Appointment>();
          }
      }


      /// <summary>
      /// Method to Create New Events
      /// </summary>
      /// <param name="apt"></param>
      /// <param name="calenderId"></param>
      public void CreateEvent(Appointment apt, string calenderId = "primary")
      {
          Event newEvent = new Event()
          {
              Summary = apt.Subject,
              Location = apt.Location,
              Description = apt.Description,
              Start = new EventDateTime()
              {
                  DateTime = apt.StartTime,
                  Time Zone = "Asia/Kolkata",
              },
              End = new EventDateTime()
              {
                  DateTime = apt.EndTime,
                  TimeZone = "America/Los_Angeles",
              }
          };
          EventsResource.InsertRequest request = Service.Events.Insert(newEvent, calenderId);
          Event createdEvent = request.Execute();
      }
  }

이제 서비스가 약속을 가져와 만들기 위해 Google 캘린더와 상호 작용할 준비가 되었습니다.

Blazor 앱에 C1Calendar 통합

필요한 NuGet package C1.Blazor.DateTimeEditors를 설치하여 C1Calendar를 Blazor 앱에 통합할 수 있습니다. C1.Blazor.DateTimeEditors NuGet 패키지는 종속성 NuGet 패키지 C1.Blazor.Core, C1.Blazor.Calendar, C1.Blazor.Input 및 일부 기타 패키지를 설치합니다.

필요한 패키지를 설치한 후 다음 코드를 사용하여 C1Calendar를 추가할 수 있습니다.

@page "/"
@using C1.Blazor.Calendar
@using C1.Blazor.Core

<C1Calendar></C1Calendar>

C1 컨트롤을 제대로 렌더링하려면 다음 스크립트 및 CSS를 추가해야 합니다.

<link rel="stylesheet" href="~/_content/C1.Blazor.Core/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.Calendar/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.Input/styles.css" />
<link rel="stylesheet" href="/_content/C1.Blazor.DateTimeEditors/styles.css" />


<script src="~/_content/C1.Blazor.Core/scripts.js"></script>
<script src="~/_content/C1.Blazor.Calendar/scripts.js"></script>
<script src="~/_content/C1.Blazor.Input/scripts.js"></script>

Google 캘린더에서 C1Calendar에 약속 표시

앱에 C1Calendar를 추가했으므로 Google 캘린더에서 이벤트 목록도 가져옵니다. 이제 DaySlotTemplate을 사용해 일 슬롯을 사용자 정의하여 C1Calendar 내에 이벤트 데이터를 표시합니다. DaySlotTemplate을 사용하여 이벤트 목록을 표시하도록 UI를 사용자 정의할 수 있습니다. 템플릿을 사용하여 지정된 날짜에 대한 스트립으로 하루에 대한 모든 이벤트를 표시할 것이고, 이벤트를 클릭하면 팝업이 표시되어 대상 이벤트에 대한 정보를 가져옵니다.

@page "/"
@inject GoogleService GoogleService
@inject IJSRuntime jsRuntime
@using GC_Blazor_Server.Data
@using C1.Blazor.DateTimeEditors
@using C1.Blazor.Calendar
@using C1.Blazor.Input
@using C1.Blazor.Core

<div class="container-fluid" style="width:100%;">
…
      <C1Calendar @ref="CustomCalender" Style="@_calendarStyle" HeaderStyle="@_calendarHeaderStyle" DayOfWeekStyle="@_calendarDayOfWeekStyle" DayStyle="@CalendarDayStyle" TodayStyle="@_calendarToDayStyle" SelectionStyle="@_calendarSelectionStyle" DisplayDateChanged="displayDateChanged" OnSelectionChanged="onSelectionChanged">
          <DaySlotTemplate>
              <div style="width:100%;height:100%;min-height:100px;max-height:140px">
                  <div style="text-align:right;height:20px;"><button @onclick="() => ShowCreateEventPopup((DateTime)context.Date)" class="oi oi-plus btn-apt"></button></div>
                  <div class="date">@context.Date.ToString("dd")</div>
                  @foreach (var HolidayData in Holiday_DataSource.FindAll(e => e.StartTime.Date == (DateTime)context.Date).Select((value, index) => new { index, value}))
                  {
                      if(HolidayData.index > 2)
                      {
                            break;
                      }
                      var eventId = HolidayData.value.Id;
                      var Type = "Holiday";
                      var idx = HolidayData.index + 1;
                      @if (HolidayData.value.Subject == "" || HolidayData.value.Subject == null)
                      {
                          <div class="event-data holiday" @onclick="() => DisplayPopUp(eventId, Type)">Holiday @idx</div>
                      }
                      else
                      {
                          <div class="event-data holiday" @onclick="() => DisplayPopUp(eventId, Type)">@HolidayData.value.Subject</div>
                      }
                  }
                  @foreach (var EventData in Meeting_DataSource.FindAll(e => e.StartTime.Date == (DateTime)context.Date).Select((value , index) => new {index, value }))
                  {
                      if(EventData.index > 2)
                      {
                          break;
                      }
                      var eventId = EventData.value.Id;
                      var Type = "Event";
                      var idx = EventData.index + 1;
                      @if (EventData.value.Subject == "" || EventData.value.Subject == null)
                      {
                        <div class="event-data event" @onclick="() => DisplayPopUp(eventId, Type)">Event @idx</div>
                      }
                      else
                      {
                          <div class="event-data event" @onclick="() => DisplayPopUp(eventId, Type)">@EventData.value.Subject</div>
                      }
                  }
              </div>
          </DaySlotTemplate>
      </C1Calendar>
  </div>
</div>

@code
{
  C1Calendar CustomCalender;
  DateTime? EventStartDate = DateTime.Today, EventEndDate = DateTime.Today;
  private DateTime SelectedDate;
  private List<Appointment> Meeting_DataSource;
  private List<Appointment> Holiday_DataSource;
  private int MonthBufferPeriod = 2;
  readonly C1Style _calendarStyle = new C1Style()
  {
      Width = "100%",
      Height = "100%",
      BorderWidth = 1,
      BorderStyle = C1StyleBorderStyle.Solid,
      BorderColor = C1Color.Black
  };
  readonly C1Style _calendarHeaderStyle = new C1Style() { };
  readonly C1Style _calendarDayOfWeekStyle = new C1Style() { };
  static readonly C1Style CalendarDayStyle = new C1Style()
  {
      FontSize = 20,
  };
  readonly C1Style _calendarToDayStyle = new C1Style(CalendarDayStyle)
  {
      BackgroundColor = "#efefef",
      Color = "#000000",
      FontWeight = "bold"
  };
  readonly C1Style _calendarSelectionStyle = new C1Style(CalendarDayStyle)
  {
      Color = "#000000",
      BackgroundColor = "#dedede",
      FontWeight = "bold"
  };
  protected async override Task OnInitializedAsync()
  {
      await base.OnInitializedAsync();
      SelectedDate = DateTime.Today;
      GetEventList(SelectedDate);
  }
  private void GetEventList(DateTime SelectedDate)
  {
      SelectedDate = new DateTime(SelectedDate.Year, SelectedDate.Month, 1);
      SelectedDate = SelectedDate.AddMonths(-MonthBufferPeriod);
      Meeting_DataSource = GoogleService.GetEvents(SelectedDate, "primary");
      Holiday_DataSource = GoogleService.GetEvents(SelectedDate, "en.indian#holiday@group.v.calendar.google.com");
  }
  public void displayDateChanged(object sender, PropertyChangedEventArgs<DateTime> e)
  {
      if ((e.OldValue.Month != e.NewValue.Month) || (e.OldValue.Year != e.OldValue.Year))
      {
          GetEventList(e.NewValue);
          StateHasChanged();
      }
  }
  private async void CreateEvent()
  {
      Appointment NewEvent = new Appointment
      {
          StartTime = SelectedDate,
          EndTime = SelectedDate,
          Subject = EventSubject,
          Location = EventLocation,
          Description = EventDescription
      };
      GoogleService.CreateEvent(NewEvent);
      GetEventList(SelectedDate);
      CustomCalender.Refresh();
      StateHasChanged();
  }
  public void onSelectionChanged(object sender, CalendarSelectionChangedEventArgs e)
  {
      SelectedDate = (DateTime)CustomCalender.SelectedDate;
  }
}

Google 캘린더에 약속 추가

이전 단계에서 새 이벤트를 만들기 위해 템플릿에 + 기호를 추가했습니다. 이 아이콘을 클릭하면 사용자가 정보를 추가할 수 있는 팝업이 표시됩니다. 정보를 제출하면 event.Insert() 메서드를 사용하여 Google 캘린더에서 새 이벤트가 생성됩니다.

public void CreateEvent(Appointment apt, string calenderId = "primary")
{
  Event newEvent = new Event()
  {
      Summary = apt.Subject,
      Location = apt.Location,
      Description = apt.Description,
      Start = new EventDateTime()
      {
          DateTime = apt.StartTime,
          TimeZone = "Asia/Kolkata",
      },
      End = new EventDateTime()
      {
          DateTime = apt.EndTime,
          TimeZone = "America/Los_Angeles",
      }
  };
  EventsResource.InsertRequest request = Service.Events.Insert(newEvent, calenderId);
  Event createdEvent = request.Execute();
}

이제 응용 프로그램이 C1Calendar에서 Google Calendar API를 사용하여 이벤트를 표시하고 추가할 준비가 되었습니다. 다음은 Google 캘린더 이벤트 정보를 표시하도록 사용자 정의한 후 C1Calendar의 모양을 보여 주는 스크린샷입니다.