Add dot grid option to Itinerary elements

src/configuration.jsx

@@ -460,6 +460,18 @@ class Configuration extends React.PureComponent {
 									{t( 'configuration.general.sidebar.description' )}
 								</Form.Text>
 							</Form.Group>
+							<Form.Group controlId="useDotGrid" className="mt-2">
+								<Form.Check
+									label={ t( 'configuration.general.dot-grid.label' ) }
+									type="checkbox"
+									checked={ this.state.useDotGrid }
+									value={ this.state.useDotGrid }
+									onChange={ this.handleFieldChange }
+								/>
+								<Form.Text className="text-muted">
+									{t( 'configuration.general.dot-grid.description' )}
+								</Form.Text>
+							</Form.Group>
 							<Form.Group controlId="year">
 								<Form.Label>{t( 'configuration.general.year' )}</Form.Label>
 								<Form.Control

src/locales/en/app.json

@@ -69,6 +69,10 @@
 				"label": "Leave permanent space for side toolbar",
 				"description": "If you prefer to keep the side toolbar always open, check this option to make sure the calendar's content will never be covered by it."
 			},
+			"dot-grid": {
+				"label": "Use dot grid for itinerary elements",
+				"description": "Itinerary lines will be displayed using a dotted grid pattern instead of solid lines"
+			},
 			"starting-month": {
 				"label": "Starting month",
 				"description": "The first month in the generated calendar. Choose something like October if you want your calendar to cover a semester, instead of a calendar year."

src/pdf/components/itinerary.jsx

@@ -1,8 +1,9 @@
-import { StyleSheet, Text } from '@react-pdf/renderer';
+import { StyleSheet, Text, View } from '@react-pdf/renderer';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 import { ITINERARY_ITEM, ITINERARY_LINES } from 'configuration-form/itinerary';
+import PdfConfig from 'pdf/config';
 
 class Itinerary extends React.PureComponent {
 	styles = StyleSheet.create( {
@@ -14,16 +15,37 @@ class Itinerary extends React.PureComponent {
 			minHeight: 20,
 			padding: '2 0 0 5',
 		},
+		dot: {
+			width: 2,
+			height: 2,
+			backgroundColor: '#AAA',
+			borderRadius: '50%',
+		},
+		dottedLine: {
+			display: 'flex',
+			flexDirection: 'row',
+			justifyContent: 'center',
+			gap: 18,
+		},
+		gridLine: {
+			fontSize: 12,
+			fontWeight: 'bold',
+			height: 18,
+			minHeight: 18,
+			padding: '2 0 0 5',
+		},
 	} );
 
 	renderItineraryItem = ( { type, value }, index ) => {
 		switch ( type ) {
 			case ITINERARY_ITEM:
-				return this.renderItem( value, index );
+				return this.props.config.useDotGrid ? this.renderGridItem( value, index )
+					: this.renderItem( value, index );
 
 			case ITINERARY_LINES:
 			default:
-				return this.renderLines( value );
+				return this.props.config.useDotGrid ? this.renderGridLines( value )
+					: this.renderLines( value );
 		}
 	};
 
@@ -44,13 +66,60 @@ class Itinerary extends React.PureComponent {
 		return lines;
 	}
 
+	renderDots( count ) {
+		const dots = [];
+		for ( let i = 0; i < count; i++ ) {
+			dots.push( <View key={ i } style={ this.styles.dot }></View> );
+		}
+
+		return dots;
+	}
+
+	renderDottedLine() {
+		return (
+			<View style={ this.styles.dottedLine }>
+				{this.renderDots( 21 )}
+			</View>
+		);
+	}
+
+	renderGridItem( text, index ) {
+		return (
+			<>
+				<Text key={ index } style={ this.styles.gridLine }>
+					{text}
+				</Text>
+				{this.renderDottedLine()}
+			</>
+		);
+	}
+
+	renderGridLine() {
+		return (
+			<>
+				<Text style={ this.styles.gridLine }></Text>
+				{this.renderDottedLine()}
+			</>
+		);
+	}
+
+	renderGridLines( count ) {
+		const lines = [];
+		for ( let i = 0; i < count; i++ ) {
+			lines.push( this.renderGridLine() );
+		}
+
+		return lines;
+	}
+
 	render() {
 		return <>{this.props.items.map( this.renderItineraryItem )}</>;
 	}
 }
 
 Itinerary.propTypes = {
 	items: PropTypes.array.isRequired,
+	config: PropTypes.instanceOf( PdfConfig ).isRequired,
 };
 
 export default Itinerary;

src/pdf/config.js

@@ -18,6 +18,7 @@ const CONFIG_FIELDS = [
 	'weekendDays',
 	'isLeftHanded',
 	'alwaysOnSidebar',
+	'useDotGrid',
 	'isMonthOverviewEnabled',
 	'habits',
 	'monthItinerary',
@@ -53,6 +54,7 @@ class PdfConfig {
 		this.weekendDays = [ 0, 6 ];
 		this.isLeftHanded = false;
 		this.alwaysOnSidebar = false;
+		this.useDotGrid = false;
 		this.monthCount = 12;
 		this.fontFamily = LATO;
 		this.isMonthOverviewEnabled = true;

src/pdf/pages/day.jsx

@@ -28,7 +28,7 @@ class DayPage extends React.Component {
 	renderExtraItems = ( items, index ) => (
 		<Page key={ index } size={ this.props.config.pageSize }>
 			<View style={ this.styles.page }>
-				<Itinerary items={ items } />
+				<Itinerary items={ items } config={ this.props.config } />
 			</View>
 		</Page>
 	);
@@ -60,7 +60,7 @@ class DayPage extends React.Component {
 							specialItems={ specialItems }
 						/>
 						<View style={ this.styles.content }>
-							<Itinerary items={ items } />
+							<Itinerary items={ items } config={ this.props.config } />
 						</View>
 					</View>
 				</Page>

src/pdf/pages/month-overview.jsx

@@ -221,14 +221,14 @@ class MonthOverviewPage extends React.Component {
 						</View>
 						{this.renderHabitsTable()}
 						<View style={ this.styles.content }>
-							<Itinerary items={ config.monthItinerary } />
+							<Itinerary items={ config.monthItinerary } config={ this.props.config } />
 						</View>
 					</View>
 				</Page>
 				{getItemsOnExtraPages( config.monthItinerary ).map( ( items, index ) => (
 					<Page key={ index } size={ config.pageSize }>
 						<View style={ this.styles.page }>
-							<Itinerary items={ items } />
+							<Itinerary items={ items } config={ this.props.config } />
 						</View>
 					</Page>
 				) )}

src/pdf/pages/week-retrospective.jsx

@@ -51,15 +51,18 @@ class WeekRetrospectivePage extends React.Component {
 							}
 						/>
 						<View style={ this.styles.content }>
-							<Itinerary items={ config.weekRetrospectiveItinerary } />
+							<Itinerary
+								items={ config.weekRetrospectiveItinerary }
+								config={ this.props.config }
+							/>
 						</View>
 					</View>
 				</Page>
 				{getItemsOnExtraPages( config.weekRetrospectiveItinerary ).map(
 					( items, index ) => (
 						<Page key={ index } size={ config.pageSize }>
 							<View style={ this.styles.page }>
-								<Itinerary items={ items } />
+								<Itinerary items={ items } config={ this.props.config } />
 							</View>
 						</Page>
 					),