Right to Left (RTL) in Flutter Event Calendar (SfCalendar)

18 Nov 20185 minutes to read

The event calendar supports right-to-left rendering and all the calendar elements rendering direction will be changed.

RTL rendering ways

Right to Left rendering can be switched in the following ways:

Wrapping the SfCalendar with Directionality widget

SfCalendar supports changing the layout direction of the widget in the right-to-left direction by using the Directionality widget and set the textDirection property as TextDirection.rtl.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Right to Left'),
        ),
        body: Directionality(
          textDirection: TextDirection.rtl,
          child: SfCalendar(
            view: CalendarView.month,
          ),
        ),
      ),
    );
  }
}

Changing the locale to RTL languages

To change the event calendar rendering direction from right to left, change the locale to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu.

DART

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: const <Locale>[
        Locale('en'),
        Locale('ar'),
        // ... other locales the app supports
      ],
      locale: const Locale('ar'),
      home: Scaffold(
        body: SfCalendar(
            //...
            ),
      ),
    );
  }
}

RTL supported calendar element

Right to Left rendering is supported for all the elements in the SfCalendar.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Right to Left'),
        ),
        body: Directionality(
          textDirection: TextDirection.rtl,
          child: SfCalendar(
            view: CalendarView.month,
            allowedViews: const [
              CalendarView.day,
              CalendarView.week,
              CalendarView.workWeek,
              CalendarView.month,
              CalendarView.schedule,
              CalendarView.timelineDay,
              CalendarView.timelineWeek,
              CalendarView.timelineWorkWeek,
              CalendarView.timelineMonth
            ],
          ),
        ),
      ),
    );
  }
}