Ectronic gradebook in React Native (Agenda)

Question

I'm working on creating an electronic gradebook in React Native with a horizontal calendar, similar to the one provided by react-native-calendar-strip. However, I'm facing an issue when trying to send a date to the CalendarStrip component to select a specific date in the calendar.

import React, { useState } from "react";
import { View, StyleSheet ,Button} from "react-native";
import CalendarStrip from 'react-native-calendar-strip';

const CalendarTest = () => {
  const handleDateSelected = (date) => {
    console.log("Selected Date:", date.format("YYYY-MM-DD"));
  };

  const handlePress = () => {
    setSelectedDate('2023 12 25');
  };

  return (
    <>
      <View style={styles.container}>
        <CalendarStrip
          style={{ height: 150, paddingTop: 20, paddingBottom: 10 }}
          iconContainer={{ flex: 0.1 }}
          onDateSelected={handleDateSelected}
        />
      </View>
      <Button title="Select date" onPress={handlePress} />
    </>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 }
});

export default CalendarTest;

Before attempting this with react-native-calendar-strip, I experimented with react-native-calendars. However, I wasn't satisfied with how it functions, especially in terms of interface for an electronic gradebook. I prefer a horizontal week calendar, which is why I'm leaning towards react-native-calendar-strip.

Could someone please provide insights into how react-native-calendar-strip works, or suggest an alternative library or solution that implements a horizontal calendar suitable for an electronic gradebook?

Answer 1

Here is the property documentation: https://github.com/BugiDev/react-native-calendar-strip#props. You can read over the properties that could be set in the component. There are also examples documented, showing the use of most properties.

Note about open-source 3rd party packages: When it comes to open-source work, like an NPM package, it's usually best to dive into the open-source code and see the inner workings of the package before you use it! It's all there to see and sometimes you think "Wow, this was all I needed this whole time", but then looking deeper you may find serious discrepancies in:

• outdated dependencies
• control over the component (could be worth taking the time to build out yourself)
• etc.