IDEA? Seasonal calendar for growing vegetables

Hey beyond-flora,
Thank you for the link to your example site, but I don’t have any ideas how to create this, it looks like a custom element using javascript. Perhaps this plugin will help, it has a similar element.

Best regards,
Mike

Hi,
Thank you for your patience, I was not able to find a solution with the built-in theme options, but I was able to come up with a shortcode that will do as you asked, since your page is black I styled it accordingly and this is the expected results:

Since you are not using a child theme I recommend using the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add the below code and save.

function garden_progress_bars_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'pre_cultivation_start' => '',
            'pre_cultivation_end' => '',
            'planting_start' => '',
            'planting_end' => '',
            'harvest_start' => '',
            'harvest_end' => '',
            'pre_cultivation_color' => '',
            'planting_color' => '',
            'harvest_color' => '',
            'pre_cultivation_label' => '',
            'planting_label' => '',
            'harvest_label' => '',
        ),
        $atts,
        'garden_progress_bars'
    );
    $output = '
    <style>
        .garden-progress-bars {
            font-family: Arial, sans-serif;
            max-width: 960px; 
            margin: 0 auto;
        }
        .progress-header, .progress-header div:not(.header-offset) {
            display: inline-flex;
            width: 100%;
            justify-content: space-evenly;
        }
		.progress-header div:not(.header-offset) {
    		border-left: 1px solid #eee;
        }
        .month {
            width: calc((100% - 160px)/12); 
            text-align: center;
        }
        .progress-row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .label-container {
            width: 150px; 
            text-align: right;
            padding-right: 10px; 
        }
        .progress-container {
            display: flex;
            width: calc(100% - 160px); 
            align-items: center;
        }
        .progress-bar-container {
            flex-grow: 1;
            background-color: #000;
            height: 20px;
            position: relative;
        }
        .progress-bar {
            height: 100%;
            position: absolute;
        }
        .progress-header .header-offset {
            width: 150px;
			display: inline-flex;
            flex-shrink: 0;
        }
    </style>
    <div class="garden-progress-bars">
        <div class="progress-header">
            <div class="header-offset"></div>'; 
    $months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    foreach ($months as $month) {
        $output .= "<div class='month'>$month</div>";
    }
    $output .= '</div>'; 
    $create_progress_bar_row = function($label, $color, $start, $end) use ($months) {
        $start_month_index = array_search($start, $months);
        $end_month_index = array_search($end, $months);
        $width = (($end_month_index - $start_month_index + 1) / 12) * 100;
        $left = ($start_month_index / 12) * 100;
        return "
        <div class='progress-row'>
            <div class='label-container'>$label</div>
            <div class='progress-container'>
                <div class='progress-bar-container'>
                    <div class='progress-bar' style='background-color: $color; width: $width%; left: $left%;'></div>
                </div>
            </div>
        </div>";
    };
    $output .= $create_progress_bar_row($atts['pre_cultivation_label'], $atts['pre_cultivation_color'], $atts['pre_cultivation_start'], $atts['pre_cultivation_end']);
    $output .= $create_progress_bar_row($atts['planting_label'], $atts['planting_color'], $atts['planting_start'], $atts['planting_end']);
    $output .= $create_progress_bar_row($atts['harvest_label'], $atts['harvest_color'], $atts['harvest_start'], $atts['harvest_end']);

    $output .= '</div>'; 

    return $output;
}
add_shortcode('garden_progress_bars', 'garden_progress_bars_shortcode');

and then on your page add this shortcode in a code block element to show the growing bars:

[garden_progress_bars pre_cultivation_start="Feb" pre_cultivation_end="Apr" pre_cultivation_color="#FF5733" pre_cultivation_label="Pre-cultivation" planting_start="Apr" planting_end="Jun" planting_color="#5EBA7D" planting_label="Planting" harvest_start="Jun" harvest_end="Sep" harvest_color="#FFC300" harvest_label="Harvest"]

This shortcode creates three bars, and for each bar you can change the label text and color of bar and the start & end month.
First try this shortcode as is to see the working solution as in the screenshot above, then you can try adjusting the attributes to suit.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
I’m glad that this helped, I looked at your test page and there is no margin or padding on the left, in the css above the “labels” have a min width

so look in the css for these three rules:

.progress-header .header-offset {
    width: 150px;
}
.label-container {
    width: 150px;
}
.progress-container {
    width: calc(100% - 160px)
}

and try a width of the labels to 80px and the progress-container to 80px like this:

.progress-header .header-offset {
    width: 80px;
}
.label-container {
    width: 80px;
}
.progress-container {
    width: calc(100% - 80px)
}

and this should move the element to the left.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike