SfCalendar in Flutter change height of resource

618 Views Asked by At

i am currently working on a SfCalendar in Flutter and I want to change the height of a resource to make it display the full information on the board. Like on my Screenshot the Resource "N/A":

Example

So the user drags the unassigned appointment, that will be loaded in Resource "N/A" to the technican like here to "T B".

Because there is lot of data in "N/A", the Text of the appointment is not showed but should be. Also, is it possible to fix the row with resource "N/A" on the top, so, when the user scrolls down, "N/A" group is always on screen?

Here is the code-snipped from the base SfCalendar Function and from the _resourceHeaderBuilder:

  /// Returns the calendar widget based on the properties passed
  SfCalendar _getMeetingRoomCalendar(
      [CalendarDataSource? _calendarDataSource, dynamic viewChangedCallback]) {
    return SfCalendar(
      showDatePickerButton: true,
      controller: _calendarController,
      allowDragAndDrop: true,
      allowedViews: _allowedViews,
      minDate: _minDate,
      timeRegionBuilder: _getSpecialRegionWidget,
      specialRegions: _specialTimeRegions,
      showNavigationArrow: true,
      dataSource: _calendarDataSource,
      onViewChanged: viewChangedCallback,
      resourceViewHeaderBuilder: _resourceHeaderBuilder,
      appointmentTimeTextFormat: 'HH:mm',
      timeSlotViewSettings: TimeSlotViewSettings(
        timeInterval: Duration(minutes: 15),
        timeFormat: 'HH:mm',
        startHour: 7,
        endHour: 18,
      ),
    );
  }

  /// Returns the widget for resource header.
  Widget _resourceHeaderBuilder(
      BuildContext context, ResourceViewHeaderDetails details) {
    final Random random = Random();

    int capacity = 0;
    if (_visibleAppointments.isNotEmpty) {
      capacity = 0;
      for (int i = 0; i < _visibleAppointments.length; i++) {
        final Appointment visibleApp = _visibleAppointments[i];
        if (visibleApp.resourceIds != null &&
            visibleApp.resourceIds!.isNotEmpty &&
            visibleApp.resourceIds!.contains(details.resource.id)) {
          capacity++;
        }
      }
    }

    String capacityString = 'Termine';

    return Container(
      height: 1000,
      child: Container(
        color: details.resource.color,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            icons[random.nextInt(5).toInt()],
            Text(
              details.resource.displayName,
              style: const TextStyle(
                  color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 5),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  const Text(
                    'Termine: ',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 10,
                    ),
                  ),
                  Container(
                    child: Text(
                      capacity.toString(),
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                          fontWeight: FontWeight.bold),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      )
    );
  }
}

I have tried it to set TimeSlotViewSettings() with height, but there was no change, also I tried to gave the Container in _resourceHeaderBuilder a height, but there was also no change.

Thank you.

1

There are 1 best solutions below

1
On

in time slot view setting just add timelineAppointmentHeight