드래그 앤 드롭과 떨림 속에서 크기 조절을 통해 데이트를 쉽게 재배치할 수 있다

업무 대상 모델에서 우리는 항상 시간과 자원의 가용성에 따라 데이트를 재배치한다.2021 Volume 3버전부터 SyncfusionFlutter event Calendar 은 사용자가 데이트를 서로 다른 시간대에 끌고 크기를 조정해서 다시 데이트를 할 수 있도록 한다.
Flitter 이벤트 달력의 크기를 드래그 앤 드롭 및 조정하여 약속 재설정
이 블로그에서, 우리는 Flutter 이벤트 달력 작은 위젯의 드래그와 크기 조정 조작을 통해 약속을 재구성하는 방법을 배울 것이다.
참고 달력 위젯의 초보라면 계속하기 전에 문서의 getting started 안내서를 읽으십시오.
우리 함께 탐색합시다!

데이트 드래그

이제 데이트를 플랜트 달력 보기의 날짜와 시간대로 끌면 데이트를 다시 할 수 있다.이를 실현하려면 달력에서 allowDragAndDrop 속성을true로 설정하십시오.
아래의 코드 예시를 참고하시오.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
            view: CalendarView.week,
            dataSource: _getCalendarDataSource(),
            allowDragAndDrop: true
        ),
      ),
    ),
  );
}

탐색 비활성화

데이트가 달력의 현재 보기의 시작점이나 끝점에 도달했을 때 내비게이션을 다음 보기나 이전 보기로 제한할 수 있습니다.이렇게 하려면 DragDropSettings에서 allowNavigation 속성을false로 설정합니다.
아래의 코드 예시를 참고하시오.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          dataSource: _getCalendarDataSource(),
          allowDragAndDrop: true,
          dragAndDropSettings: DragAndDropSettings(
              allowNavigation: false),
        ),
      ),
    ),
  );
}

떨림 이벤트 달력에서 보기 내비게이션 비활성화

처리 탐색 지연

데이트를 다음 보기나 이전 보기로 드래그할 때 내비게이션 지연 시간을 쉽게 사용자 정의할 수 있습니다.DragDropSettings의 autoNavigationDelay 속성에서 기간을 설정합니다.
아래의 코드 예시를 참고하시오.여기, 우리는 지연 시간을 1초로 설정할 것이다.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          dataSource: _getCalendarDataSource(),
          allowDragAndDrop: true,
          dragAndDropSettings: DragAndDropSettings(
              autoNavigateDelay: Duration(seconds: 1)),
        ),
      ),
    ),
  );
}

보기 스크롤 비활성화

약속이 뷰포트의 시작점이나 끝점에 도달할 때 시간대 뷰의 자동 스크롤을 제한합니다.DragDropSettings에서 allowScroll 속성을false로 설정합니다.
아래의 코드 예시를 참고하시오.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          dataSource: _getCalendarDataSource(),
          allowDragAndDrop: true,
          dragAndDropSettings: DragAndDropSettings(
              allowScroll: false),
        ),
      ),
    ),
  );
}

떨림 이벤트 달력에서 보기 자동 스크롤 사용하지 않기

드래그 시간 표시기 보이기

데이트를 드래그할 때, 시간 표시기는 틈새 보기의 시간 표시자 보기에 현재 드래그 시간을 표시합니다.이렇게 하려면 DragDropSettings에서 showTimeIndicator 속성을true로 설정하십시오.
또한 텍스트 스타일을 timeIndicatorStyle로 설정하여 시간 표시기 텍스트 스타일을 사용자 정의할 수 있습니다.형식을 DragDropSettings의 indicatorTimeFormat로 설정하여 형식을 정의합니다.
아래의 코드 예시를 참고하시오.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          dataSource: _getCalendarDataSource(),
          allowDragAndDrop: true,
          dragAndDropSettings: DragAndDropSettings(
              indicatorTimeFormat: 'hh:mm',
              showTimeIndicator: true,
              timeIndicatorStyle: TextStyle(backgroundColor: Colors.red)),
        ),
      ),
    ),
  );
}

답전

드래그 앤 드롭 작업을 수행할 때 다음과 같은 세 가지 콜백을 사용하여 드래그 앤 드롭 세부 정보를 확인할 수 있습니다.

onDragStart

onDragUpdate

옹드라건

아래의 코드 예시를 참고하시오.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
           dataSource: _getCalendarDataSource(),
           allowDragAndDrop: true,
           onDragStart: dragStart,
           onDragUpdate: dragUpdate,
           onDragEnd: dragEnd,
        ),
      ),
    ),
  );
}

앙드라거스트

Flatter 이벤트 달력에서 데이트를 드래그하기 시작할 때마다 이 리셋을 호출합니다.그것은 데이트에 대한 상세한 정보를 제공했다.AppointmentStartDetails 매개 변수는 드래그 데이트와 관련된 자원 세부 정보를 포함합니다.

void dragStart(AppointmentDragStartDetails appointmentDragStartDetails) {
  final dynamic appointment = appointmentDragStartDetails.appointment;
  final CalendarResource? resource = appointmentDragStartDetails.resource;
}

옹드라 업데이트

데이트가 드래그 상태일 때마다 이 리셋을 사용합니다.그것은 데이트의 드래그 위치와 시간을 제공한다.AppointmentDragUpdateDetails 매개 변수는 드래그 데이트, 드래그 시간, 드래그 편이량, 원본 자원과 목표 자원에 대한 상세한 정보를 포함합니다.

void dragUpdate(AppointmentDragUpdateDetails appointmentDragUpdateDetails) {
  final dynamic appointment = appointmentDragUpdateDetails.appointment;
  final DateTime? draggingTime = appointmentDragUpdateDetails.draggingTime;
  final Offset? draggingOffset = appointmentDragUpdateDetails.draggingPosition;
  final CalendarResource? resource = appointmentDragUpdateDetails.sourceResource;
  final CalendarResource? targetResource = appointmentDragUpdateDetails.targetResource;
}

앙드라건

드래그할 데이트를 삭제할 때 이 리셋을 호출합니다.삭제된 시간과 자원에 대한 상세한 정보를 제공합니다.AppointmentDragEndDetails 매개 변수는 삭제된 데이트, 삭제 시간, 원본 및 목표 자원에 대한 상세한 정보를 포함합니다.

void dragEnd(AppointmentDragEndDetails appointmentDragEndDetails) {
  final dynamic appointment = appointmentDragEndDetails.appointment!;
  finla CalendarResource? sourceResource = appointmentDragEndDetails.sourceResource;
  final CalendarResource? targetResource = appointmentDragEndDetails.targetResource;
  final DateTime? draggingTime = appointmentDragEndDetails.droppingTime;
}

Flatter 이벤트 달력에서 데이트 드래그

예약 조정

이제 데이트를 데스크톱 플랫폼의'피리 달력'보기의 시간대별로 조정하면 데이트의 시작과 끝 시간을 쉽게 재배치할 수 있다.달력에서 allowAppointmentResize 속성을true로 설정합니다.
아래의 코드 예시를 참고하시오.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          dataSource: _getCalendarDataSource(),
          allowAppointmentResize: true
        ),
      ),
    ),
  );
}

주의: 예약 조정 기능은 모바일 플랫폼에 적용되지 않습니다.

답전

크기 조정 작업을 수행할 때 다음 세 가지 콜백을 사용하여 데이트 세부 정보를 확인할 수 있습니다.

On 애플리케이션 포인트 ResizeStart

OnApp PointmentResizeUpdate

OnAppointResizeEnd

아래의 코드 예시를 참고하시오.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          dataSource: _getCalendarDataSource(),
          allowAppointmentResize: true,
          onAppointmentResizeStart: resizeStart,
          onAppointmentResizeUpdate: resizeUpdate,
          onAppointmentResizeEnd: resizeEnd,
        ),
      ),
    ),
  );
}

onAppointmentResizeStart

Flatter 이벤트 달력에서 큰 시간을 조정하기 시작할 때마다 이 리셋을 사용합니다.그것은 조정 중인 데이트에 대한 상세한 정보를 제공할 것이다.AppointmentResizeStartDetails 매개 변수는 크기를 조절하는 데이트와 관련된 자원에 대한 상세한 정보를 포함합니다.

void resizeStart(AppointmentResizeStartDetails appointmentResizeStartDetails) {
  dynamic appointment=appointmentResizeStartDetails.appointment;
  CalendarResource? resource = appointmentResizeStartDetails.resource;
}

OnApp PointmentResizeUpdate

데이트가 크기 조정 상태에 있을 때마다 이 리셋을 사용합니다.그것은 예약의 위치 조정과 시간을 제공할 것이다.AppointmentResizeUpdateDetails 매개 변수는 데이트 크기 조정, 시간 조정, 편이도 조정 및 자원 세부 정보를 포함합니다.

void resizeUpdate(AppointmentResizeUpdateDetails appointmentResizeUpdateDetails) {
  dynamic appointment = appointmentResizeUpdateDetails.appointment;
  DateTime? resizingTime = appointmentResizeUpdateDetails.resizingTime;
  Offset? resizingOffset = appointmentResizeUpdateDetails.resizingOffset;
  CalendarResource? resourceDetails = appointmentResizeUpdateDetails.resource;
}

OnApp PointmentResizeEnd

우리가 약속 시간을 조정할 때, 이 리셋을 호출할 것이다.그것은 업데이트의 시간과 자원에 대한 상세한 정보를 제공했다.AppointmentResizeEndDetails 매개 변수는 크기를 조절하는 데이트, 시작 시간, 종료 시간과 자원에 대한 상세한 정보를 포함합니다.

void resizeEnd(AppointmentResizeEndDetails appointmentResizeEndDetails) {
  dynamic appointment = appointmentResizeEndDetails.appointment;
  DateTime? startTime = appointmentResizeEndDetails.startTime;
  DateTime? endTime = appointmentResizeEndDetails.endTime;
  CalendarResource? resourceDetails = appointmentResizeEndDetails.resource;
}

Flatter 이벤트 달력의 데이트 조정

결론

읽어주셔서 감사합니다!우리는 Flutter event Calendar 버전2021 Volume 3에서 내놓은 드래그 앤 드롭과 크기 조정 기능을 어떻게 사용해서 예약을 재조정하는지 이미 알고 있다.이러한 기능에 대한 정보는 저희release notes 와 What’s New 페이지에서도 찾을 수 있습니다.이 기능들을 사용해 보세요. 플리터 프로그램에서 데이트를 쉽게 재배치하세요!
또한 언제든지 저희GitHub repository.가 제공한 떨림 달력의 예시를 시험해 보십시오.
기존 고객의 경우 License and Downloads 페이지에서 최신 버전의 Essential Studio를 다운로드할 수 있습니다.Syncfusion 고객이 아닌 경우 사용 가능한 기능을 30일free trial 동안 검토해 보십시오.
저희support forums, Direct-Trac 또는 feedback portal를 통해서도 저희에게 연락하실 수 있습니다.우리는 언제든지 기꺼이 당신을 돕겠습니다!

관련 블로그